弹性盒子(display:flex)详解

<style>
        .a{
            width: 1000px;
            height: 1000px;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .b3{
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>

html：

<body>
    <div class="a">
        <div class="b">1</div>
        <div class="b1">2</div>
        <div class="b2">3</div>
        <div class="b3">4</div>
    </div>
</body>

当添加属性时：

4.1.1 row 从左到右排序

css：

        .a{
            width: 1000px;
            height: 1000px;
            display: flex;
            flex-direction: row;
        }

4.1.2 row-reverse 从右到左排序

css:

        .a{
            width: 1000px;
            height: 1000px;
            display: flex;
            flex-direction: row-reverse;
        }

row：主轴对齐，也可以说是水平对齐，也就是从左到右对齐；
row-reverse：主轴对齐，reverse(翻转)，所以这里是从右到左对齐；

4.1.3 column 从上到下垂直排序

        .a{
            width: 1000px;
            height: 1000px;
            display: flex;
            flex-direction: column;
        }

4.1.4 column-reverse 从下到上垂直排序

        .a{
            width: 1000px;
            height: 1000px;
            display: flex;
            flex-direction: column-reverse;
        }

column：交叉轴对齐，也可以说是垂直对齐，也就是从上到下对齐；
column-reverse：交叉轴对齐，同理这里是从下到上对齐；

4.2 flex-wrap 换行

flex-wrap规定flex容器是单行或多行的，同时横轴的方向决定了新行堆叠的方向（换行）

换行中有三种属性值分别是nowrap 不换行，wrap自动进行换行，wrap-reverse是翻转换行。

4.2.1 nowrap 不换行

css：

        .a{
            width: 300px;
            height: 200px;
            display: flex;
            flex-wrap: nowrap;
        }

4.2.2 wrap 换行

        .a{
            width: 300px;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

4.2.3 wrap-reverse 翻转换行

css：

        .a{
            width: 300px;
            height: 200px;
            display: flex;
            flex-wrap: wrap-reverse;
        }

nowrap ：默认值，不换行；不换行的话，如果所有子元素的宽/高总值大于父元素的宽/高，那么为了子元素不溢出，会把内容挤压变形到自适应的宽高；
warp：对齐方向不溢出的自动换行；

弹性盒子的特点中有一点是简化布局所以我们还可以把排序和换行组合在一起写：

4.2.4 flex-dirction和flex-wrap的组合简写模式

css

        .a{
            width: 300px;
            height: 200px;
            display: flex;
            flex-flow: row wrap;
        }

可以看到两者样式结合在一起正常使用，两者的其他属性值也可像这种格式一起使用

4.3 justify-content:用于控制元素在主轴(X轴)上的排序方式：

属性值	含义
flex-start	紧靠主轴起点
flex-end	紧靠主轴终点
center	居中
space-between	两端对齐，元素之间的间隔相等
space-around	元素两侧的间距相同，元素之间的间距比两侧的间距大一倍
space-evenly	元素间距离平均分配

4.3.1 flex-start 紧靠主轴起点

css：

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content: flex-start;
            border: 1px solid black;
        }

4.3.2 flex-end 紧靠主轴终点

css：

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content: flex-end;
            border: 1px solid black;
        }

4.3.3 center 居中

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content:center;
            border: 1px solid black;
        }

4.3.4 space-between 两端对齐，元素之间的间隔相等

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content:space-between;
            border: 1px solid black;
        }

4.3.5 space-around 元素两侧的间距相同，元素之间的间距比两侧的间距大一倍

css

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content:space-around;
            border: 1px solid black;
        }

4.3.6 space-evenly 元素间距离平均分配

css

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            justify-content:space-evenly;
            border: 1px solid black;
        }

以上是六种在主轴上的排序方式

align中的属性有两种，第一种是align-items,第二种是align-content。

4.4 align-items用于控制容器元素在交叉轴(y轴)上的排序方式

属性值	含义
flex-start	元素位于交叉轴的起点
flex-end	元素位于交叉轴的终点
center	元素位于交叉轴的中点
baseline	元素的第一行文字的基线对齐
stretch	（默认值）如果元素未设置高度或者auto，将占满整个容器的高度

4.4.1 flex-start 交叉轴起点对齐

css

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            align-items: flex-start;
            border: 1px solid black;
        }

4.4.2 flex-end 交叉轴终点对齐

css

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            align-items: flex-end;
            border: 1px solid black;
        }

4.4.3 center 交叉轴中点对齐

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            align-items: center;
            border: 1px solid black;
        }

4.4.4 baseline 元素的第一行文字的基线对齐

css

        .a{
            width: 500px;
            height: 200px;
            display: flex;
            align-items: baseline;
            border: 1px solid black;
        }

4.4.5 stretch 默认值,如果元素未设置高度或者auto，将占满整个容器的高度

在上面的样式中，前两个盒子并没有设置高度，那么使用stretch就会自动填满父元素容器，而后两个盒子设置了高度则不会变

css

    <style>
        .a{
            width: 500px;
            height: 200px;
            display: flex;
            align-items: stretch;
            border: 1px solid black;
        }
        .b{
            width: 100px;
            background-color: red;
        }
        .b1{
            width: 100px;
            background-color: blue;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .b3{
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>

容器的填充方向是按照侧轴方向填充的

4.5 align-content只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴(y轴)上的排序方式,如果项目只有一根轴线，那么该属性不起作用

属性值	含义
flex-start	位于交叉轴的起点
flex-end	位于交叉轴的终点
center	位于交叉轴的中点
space-between	两端对齐，元素之间的间隔相等
space-around	元素两侧的间距相同，元素之间的间距比两侧的间距大一倍
stretch	默认值，轴线占满整个交叉轴
space-evenly	在交叉轴上平均分配空间

4.5.1 flex-start 交叉轴的起点

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.2 flex-end 交叉轴的终点

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: flex-end;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.3 center 交叉轴的中点

css

     .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.4 space-between 交叉轴两端对齐之间间隔平分

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: space-between;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.5 space-around 元素两侧的间距相同，元素之间的间距比两侧的间距大一倍

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: space-around;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.6 stretch 默认值，轴线占满整个交叉轴

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: stretch;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.5.7 space-evenly 在交叉轴上平均分配空间

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: space-evenly;
            flex-wrap: wrap;
            border: 1px solid black;
        }

4.6 单个对齐方式align-self

属性值	含义
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始

align-self属性可以使单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            border: 1px solid black;
        }

接下来为b写入align-self属性： align-self: flex-end;，效果如下：

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            border: 1px solid black;
        }
        .b{
            width: 100px;
            height: 100px;
            align-self: flex-end;
            background-color: red;
        }

4.7 排序order

order：项目的排列顺序，数字越小排列越靠前，默认为0。

正常的效果是这样的：

排序后的效果：

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: stretch;
            flex-wrap: wrap;
            border: 1px solid black;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: red;
            order: 3;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color: blue;
            order:1;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: green;
            order: 0;
        }
        .b3{
            width: 100px;
            height: 100px;
            background-color: gray;
            order: 2;
        }

4.8 放大比例flex-grow

如果所有项目的flex-grow属性值都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性值为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

css

    .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: stretch;
            flex-wrap: wrap;
            border: 1px solid black;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: red;
            flex-grow: 2;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex-grow: 2;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .b3{
            width: 100px;
            height: 100px;
            background-color: gray;
        }

4.9 缩小比例flex-shrink

缩小比例是指在空间不够时会将元素进行压缩

未压缩时的效果

压缩1，2，后的效果

css

        .a{
            width: 500px;
            height: 600px;
            display: flex;
            align-content: stretch;
            border: 1px solid black;
        }
        .b{
            width: 200px;
            height: 100px;
            background-color: red;
            flex-shrink: 3;

        }
        .b1{
            width: 200px;
            height: 100px;
            background-color: blue;
            flex-shrink: 3;
        }
        .b2{
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .b3{
            width: 200px;
            height: 100px;
            background-color: gray;
        }