flex布局-概念及骰子布局

2019-02-13  本文已影响0人  ChicAboo

注：概念部分借鉴菜鸟教程，概念部分图片来源菜鸟教程
http://www.runoob.com/w3cnote/flex-grammar.html

目录：

一、概念

      flex布局称为flex容器，flex容器默认两根轴：水平主轴和垂直交叉轴。以下概念都围绕水平主轴和垂直交叉轴而定义。


flex

二、flex容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
1. flex-direction 决定主轴的方向
  • row(默认值): 主轴水平方向，左端为起点
  • row-reverse: 主轴水平方向，右端为起点
  • column: 主轴垂直方向，上端为起点
  • column-reverse: 主轴垂直方向，下端为起点
flex-direction
2. flex-wrap 项目是否排列在轴线上，是否换行属性
  • nowrap(默认值): 不换行
  • wrap: 换行，第一行在上方
  • wrap-reverse: 换行，第一行在下方
flex-wrap
3. flex-flow:<flex-direction> <flex-wrap> flex-direction和flex-wrap的简写
4. justify-content 定义主轴上的对其方式
  • flex-start(默认值): 左对齐
  • flex-end: 右对齐
  • center: 居中
  • space-between: 两端对其，项目间间距相等
  • space-around: 每个项目两端的间距相等
justify-content
5. align-items 项目在交叉线上的对齐方式
  • flex-start: 交叉线的起点对齐
  • flex-end: 交叉线的终点对齐
  • center: 交叉线的中心对齐
  • baseline: 项目第一行文字的基线对齐
  • stretch(默认值): 如果项目未设置高度或auto,将占满容器的高度
align-items
6. align-content 多行对其，如果只有一行，不起作用

flex-start: 与交叉点的起点对齐

  • flex-end: 与交叉点的终点对齐
  • center: 与交叉点的中心对齐
  • space-between: 与交叉线两端对齐，轴线间间隔平均分配
  • space-around: 每根轴线间隔相等
  • stretch: 轴线占满整个交叉线
align-content

三、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
1. order定义项目的排列顺序，值越小越靠前，默认为0

.item {
    order: <integer>;
}


order
2. flex-grow定义项目的放大比例，默认为0

.item {
     flex-grow: <number>;
}

flex-grow

如果flex-grow为1，则项目等分，如果有一个为2，其他为1，则该项目是其他项目的两倍。

3. flex-shrink定义项目的缩小比例，默认值为1。

.item {
    flex-shrink: <number>;
}

flex-shrink

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效

4. flex-basis定义在分配空间之前，项目占主轴空间，默认值为auto。

.item {
    flex-basis: <length> | auto;
}

它可以设为跟width或height属性一样的值（比如250px），则项目将占据固定空间。

5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。习惯使用这个属性。

6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

四、flex布局实践（骰子布局）

假设骰子的一面最多可以放9个点。


sz.png

下面来说如何使用flex布局骰子，html默认为

    <div class="box">
        <div class="item"></div>
    </div>

.box元素代表flex容器，.item元素代表一个项目，需要几个项目就有几个class为item的div元素。

1. 单项目

1.1 首先左上角一个点，默认情况即可。


s1.png 
    .box {
        width: 60px;
        height: 60px;
        border: 1px solid white;
        background: white;
        border-radius: 5px;
        display: flex;
        margin: 10px;
    }

.box的样式为以上，下面所有都依据这个来的。

1.2 黑点在第一行居中对齐，使用justify-content: center即可。


s2.png 
    .box.one1 {
        flex-direction: row;   /* 默认值可以不写*/
        justify-content: center;
    }

1.3 黑点在第一行右对齐，使用justify-content: flex-end。


s3.png 
    .box.one2 {
        justify-content: flex-end;
    }

1.4 黑点在第二行第一个，转化为垂直交叉线排列方式，居中即可。


s4.png 
    .box.one3 {
        align-items: center;
    }

1.5 黑点垂直水平居中


s5.png 
    .box.one4 {
        align-items: center;
        justify-content: center;
    }

1.6 黑点在第二行右侧


s6.png 
    .box.one5 {
        align-items: center;
        justify-content: flex-end;
    }

1.7 黑点在最后一行第一个


s7.png 
    .box.one6 {
        align-items: flex-end;
    }

1.8 黑点在最后一行居中


s8.png 
    .box.one7 {
        align-items: flex-end;
        justify-content: center;
    }

1.9 黑点在最后一行最后一个


s9.png 
    .box.one8 {
        align-items: flex-end;
        justify-content: flex-end;
    }
2. 双项目

html模版为

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

2.1 第一行左右布局


b1.png 
    .box.two1 {
        justify-content: space-between;
    }

2.2 左侧上下布局


b2.png 
  .box.two2 {
        flex-direction: column;
        justify-content: space-between;
    }

2.3 居中上下布局


b3.png 
    .box.two3 {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

2.4 右侧上下布局


b4.png 
    .box.two4 {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

2.5 左上右下布局


b5 
    .box.two3 {
        justify-content: space-between;
    }
    .two3 .item:last-child {
        align-self: flex-end;
    }
3. 三项目

html模版

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

3.1 一左二中三右布局


t1 
    .three1 {
        flex-direction: column;
    }
    .three1 .item:nth-child(2) {
        align-self: center;
    }
    .three1 .item:nth-child(3) {
        align-self: flex-end;
    }

3.2 一右二中三左布局


t2 
    .three2 {
        flex-direction: column;
        align-items: flex-end;
    }
    .three2 .item:nth-child(2) {
        align-self: center;
    }
    .three2 .item:nth-child(3) {
        align-self: flex-start;
    }
4. 四项目

4.1 第一排铺满，最后一排右布局
模版：

<div class="box four1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

图：


f1

样式：

    .four1 {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: space-between;
    }

4.2 上下左右四个角布局
html模版:

<div class="box four2">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

图：


image.png

样式：

    .four2 {
        flex-direction: column;
        justify-content: space-between;
    }
    .column {
        display: flex;
        justify-content: space-between;
    }
5. 五项目

html模版：

<div class="box four2">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column mid">
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

图：


five

样式：

    .four2 {
        flex-direction: column;
        justify-content: space-between;
    }
    .column {
        display: flex;
        justify-content: space-between;
    }
    .mid {
        align-items: center;
        justify-content: center;
    }
6. 六项目

html模版：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

6.1 上三下三布局


six1 
    .s1 {
        flex-wrap: wrap;
        align-content: space-between;
    }

6.2 左三右三布局


six2 
    .s2 {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
    }
7 九项目

html模版：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

图：


image.png

样式：

    .n1 {
        flex-wrap: wrap;
    }
五、总结

      使用flex布局很多情况下节省很多工作量，方便简单好用。特别手机端用的很多。

六、完整代码没上传GitHub，这儿随便写了下符在下面。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                background: black;
            }

            .con {
                margin: 50px;
                display: flex;
                flex-direction: row;
            }

            .box {
                width: 60px;
                height: 60px;
                border: 1px solid white;
                background: white;
                border-radius: 5px;
                display: flex;
                margin: 10px;
            }
            .item {
                width: 10px;
                height: 10px;
                background: black;
                border-radius: 5px;
                margin: 5px;
            }

            .box.one1 {
                flex-direction: row;
                justify-content: center;
            }
            .box.one2 {
                flex-direction: row;
                justify-content: flex-end;
            }
            .box.one3 {
                flex-direction: row;
                align-items: center;
            }
            .box.one4 {
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .box.one5 {
                align-items: center;
                justify-content: flex-end;
            }
            .box.one6 {
                align-items: flex-end;
            }
            .box.one7 {
                align-items: flex-end;
                justify-content: center;
            }
            .box.one8 {
                align-items: flex-end;
                justify-content: flex-end;
            }

            .box.two1 {
                justify-content: space-between;
            }
            .box.two2 {
                flex-direction: column;
                justify-content: space-between;
            }
            .box.two21 {
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            .box.two22 {
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;
            }
            .box .item1 {
                align-self: center;
            }
            .box.two3 {
                justify-content: space-between;
            }
            .two3 .item:last-child {
                align-self: flex-end;
            }

            .t1 {
                flex-direction: column;
            }
            .t1 .item:nth-child(2) {
                align-self: center;
            }
            .t1 .item:nth-child(3) {
                align-self: flex-end;
            }
            .t2 {
                flex-direction: column;
                align-items: flex-end;
            }
            .t2 .item:nth-child(2) {
                align-self: center;
            }
            .t2 .item:nth-child(3) {
                align-self: flex-start;
            }

            .f1 {
                flex-wrap: wrap;
                justify-content: flex-end;
                align-content: space-between;
            }

            .f2 {
                flex-direction: column;
                justify-content: space-between;
            }
            .column {
                display: flex;
                justify-content: space-between;
            }
            .mid {
                align-items: center;
                justify-content: center;
            }

            .s1 {
                flex-wrap: wrap;
                align-content: space-between;
            }
            .s2 {
                flex-direction: column;
                flex-wrap: wrap;
                align-content: space-between;
            }

        </style>
    </head>

    <body>
    <!-- 1 -->
        <div class="con">
            <div class="box">
                <div class="item"></div>
            </div>

            <div class="box one1">
                <div class="item"></div>
            </div>
            <div class="box one2">
                <div class="item"></div>
            </div>
            <div class="box one3">
                <div class="item"></div>
            </div>
            <div class="box one4">
                <div class="item"></div>
            </div>
            <div class="box one5">
                <div class="item"></div>
            </div>
            <div class="box one6">
                <div class="item"></div>
            </div>
            <div class="box one7">
                <div class="item"></div>
            </div>
            <div class="box one8">
                <div class="item"></div>
            </div>
        </div>

    <!-- 2 -->
    <div class="con">
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two1">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two2">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two21">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two22">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box">
            <div class="item"></div>
            <div class="item item1"></div>
        </div>
        <div class="box two3">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <!-- 3 -->
    <div class="con">
        <div class="box t1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box t2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <!-- 4、5 -->
    <div class="con">
        <div class="box f1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box f2">
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <div class="box f2">
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column mid">
                <div class="item"></div>
            </div>
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>

    <!-- 6、9 -->
    <div class="con">
        <div class="box s1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box s2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box s1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    </body>
    </html>
上一篇下一篇

猜你喜欢

热点阅读