• 浅谈flex布局


    浅谈flex布局

    读阮大神的文章整理,原文请移步。

    学习小建议:flex布局在实战之前,需要了解相关属性,在进行实战的训练,你会感觉到倍爽。

    传统的布局基于盒子模型,依赖display属性和position属性和float属性,它在实现一些布局的时候非常的不方便,如垂直居中。

    1.flex布局是弹性布局的意思,用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为flex布局

    .box{
    	display:flex;
    }
    

    行内元素也可使用:

    .box{
    	display:inline-flex;
    }
    

    2.采用flex布局,称flex为容器,它的所有子元素自动成为容器成员。

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

    3.容器的属性

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    3.1flex-direction属性决定主轴的方向,即项目的排列放方向。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。

    3.2flex-wrap属性,flex容器中的元素是否按照轴线排列。

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
    • nowrap(默认):不换行。
    • wrap:换行,第一行在上方。
    • wrap-reverse:换行,第一行在下方。

    3.3 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }
    

    3.4 justify-content属性定义了项目在主轴上的对齐方式。

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    3.5 align-items属性定义项目在交叉轴上如何对齐。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    
    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    3.6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    
    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

    项目实战: 一个子元素##

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
            }
    
    
            .item{
                 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                margin: 5px 5px;
            }
    
    
    
            .box{
                display: flex;  /*左上角默认首行左对齐*/
            }
    
            .box{
                display: flex;
                justify-content: center;  /*设置元素的对齐方式*/
            }
    
            .box{
                display: flex;
                justify-content: flex-end;
            }
    
    
            .box{
                display: flex;
                align-items: center;  /*设置主轴对齐方式*/
            }
    
            .box{
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
    
            .box{
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }
    
            .box{
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <span class="item"></span>
    </div>
    </body>
    </html>
    

    项目实战:两个子元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
            }
    
    
            .item{
                 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                margin: 10px 10px;
            }
    
            .box{
                display: flex;
                justify-content: space-between;
            }
    
            .box{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
    
            .box{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
    
            .box{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;
            }
    
            .box{
                display: flex;
            }
    
            .item:nth-child(2){
                align-self: center;
            }
    
    
            .box{
                display: flex;
                justify-content: space-between;
            }
            .item:nth-child(2){
                align-self: flex-end;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    </body>
    </html>
    

    项目实战:三个子元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
            }
    
    
            .item{
                 10px;
                height: 10px;
                background: black;
                border-radius: 10px;
                margin: 10px 10px;
            }
    
            .box{
                display: flex;
            }
    
            .item:nth-child(2){
                align-self: center;
            }
            .item:nth-child(3){
                align-self: flex-end;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    </body>
    </html>
    

    项目实战:四个子元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
            }
    
    
            .item{
                 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                margin: 5px 5px;
            }
    
            .box{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                align-content: space-between;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
            }
    
            .column {
                flex-basis: 100%;
                display: flex;
                justify-content: space-between;
            }
    
    
            .item{
                 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                margin: 5px 5px;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
    </body>
    </html>
    

    项目是实战:六个子元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background: gainsboro;
                margin: 50px auto;
                border-radius: 20px;
                display: flex;
                flex-wrap: wrap;
            }
    
            .row{
                flex-basis: 100%;
                display:flex;
            }
    
            .row:nth-child(2){
                justify-content: center;
            }
    
            .row:nth-child(3){
                justify-content: space-between;
            }
    
    
            .item{
                 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                margin: 5px 5px;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="row">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="row">
            <span class="item"></span>
        </div>
        <div class="row">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
    </body>
    </html>
    

    实战布局:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>流式布局</title>
        <style type="text/css">
            .parent{
                 200px;
                height: 150px;
                background: black;
                display: flex;
                flex-flow: row wrap;
                align-content: flex-start;
            }
    
            .child{
                box-sizing: border-box;
                background-color: white;
                flex: 0 0 25%;
                height: 50px;
                border:  1px solid rebeccapurple;
            }
        </style>
    </head>
    <body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
    </body>
    </html>
    

    最后来一道大菜:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            .first-face {
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .second-face {
                display: flex;
                justify-content: space-between;
            }
    
            .second-face .pip:nth-of-type(2) {
                align-self: flex-end;
            }
    
            .third-face {
                display: flex;
                justify-content: space-between;
            }
    
            .third-face .pip:nth-of-type(2) {
                align-self: center;
            }
    
            .third-face .pip:nth-of-type(3) {
                align-self: flex-end;
            }
    
            .fourth-face, .sixth-face {
                display: flex;
                justify-content: space-between;
            }
    
            .fourth-face .column, .sixth-face .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
    
            .fifth-face {
                display: flex;
                justify-content: space-between;
            }
    
            .fifth-face .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
    
            .fifth-face .column:nth-of-type(2) {
                justify-content: center;
            }
    
            /* OTHER STYLES */
    
            * {
                box-sizing: border-box;
            }
    
            html, body {
                height: 100%;
            }
    
            body {
                display: flex;
                align-items: center;
                justify-content: center;
                vertical-align: center;
                flex-wrap: wrap;
                align-content: center;
                font-family: 'Open Sans', sans-serif;
    
                background: linear-gradient(top, #222, #333);
            }
    
            [class$="face"] {
                margin: 16px;
                padding: 4px;
    
                background-color: #e7e7e7;
                 104px;
                height: 104px;
                object-fit: contain;
    
                box-shadow:
                        inset 0 5px white,
                        inset 0 -5px #bbb,
                        inset 5px 0 #d7d7d7,
                        inset -5px 0 #d7d7d7;
    
                border-radius: 10%;
            }
    
            .pip {
                display: block;
                 24px;
                height: 24px;
                border-radius: 50%;
                margin: 4px;
    
                background-color: #333;
                box-shadow: inset 0 3px #111, inset 0 -3px #555;
            }
        </style>
    </head>
    <body>
        <div class="first-face">
            <span class="pip"></span>
        </div>
        <div class="second-face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="third-face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="fourth-face">
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
        <div class="fifth-face">
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
        <div class="sixth-face">
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
            <div class="column">
                <span class="pip"></span>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        </div>
    </body>
    </html>
    

    粘贴到你的编辑器里面即可看到效果。

  • 相关阅读:
    两类常见场景下的云原生网关迁移实践
    2022云原生峰会开启报名 | 一年一度云原生技术风向标就看这里!
    vivo 鲁班平台 RocketMQ 消息灰度方案
    年度大促将至,企业如何进行性能压测
    OpenYurt v1.0 正式发布!一文了解三大社区 SIG 重点更新
    Apache RocketMQ 在阿里云大规模商业化实践之路
    全嘉宾阵容官宣 | 2022 云原生峰会即将启动,实战派企业向你发出邀请
    训练营 | 如何成为一名开源社区贡献者?
    型号
    Linux命令行快捷键
  • 原文地址:https://www.cnblogs.com/zhnaglei/p/6632070.html
Copyright © 2020-2023  润新知