display:flexflex就有弯曲收缩的意思 , flex布局就是我们常说的css弹性布局 .今天就系统整理一下关

flex就有弯曲收缩的意思 , flex布局就是我们常说的css弹性布局 .
学习这种布局方式呢首先要了解两个概念

弹性容器
弹性子元素这种布局方式既可以通过对容器属性定义来影响子元素 , 又可以通过子元素属性来定义子元素个性化的定制

容器

为父元素添设置display:flex;就可以让父元素变为弹性容器 . 看一下这个属性的兼容性:

(图片来源于CSS Flexbox (w3school.com.cn))幸运的是IE11也可以使用这个属性
与display:flex;相类似的一个属性叫display:inline-flex;两者的区别就是父元素本身是弹性容器的同时还是行内元素还是块级元素.对布局的影响主要体现在容器的兄弟元素上.如下:

<style>
    .container{
        display:flex;
        /*display:inline-flex;*/
        width:30%;
        height:200px;
        background-color:pink;
    }
    .container-brother{
        display: inline-block;
        width:30%;
        height:200px;
        background-color:pink;
    }
</style>
<body>
    <div class="container">
        container
    </div>
    <div class="container-brother">
        container-brother
    </div>
</body>

弹性布局主要的研究对象是弹性容器与弹性子元素 , 所以就不过多讨论弹性容器与兄弟元素之间的关系了 , 再重新定义一下我们需要准备的元素:

<style>
    .container{
        display:flex;
        /*display:inline-flex;*/
        width:30%;
        height:200px;
        background-color:pink;
    }
    .container-brother{
        display: inline-block;
        width:30%;
        height:200px;
        background-color:pink;
    }
</style>
<body>
    <div class="container">
        container
    </div>
    <div class="container-brother">
        container-brother
    </div>
</body>

然后要说明的是当一个元素变为弹性容器之后其内部的直接子元素自动变为弹性子元素.

弹性容器属性

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

flex-direction

弹性容器中需要明确两个轴 , 主轴和交叉轴 . 主轴默认是水平方向的 , 交叉轴是与主轴垂直的轴.flex-direction就是指定主轴的方向的.
值:

row (默认)
column
row-reverse
column-reverse 其内部的子元素默认是沿主轴方向排列的

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        flex-direction: row;
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
    }
    .container .item{
        width: 20%;
        height: 100px;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<body>
<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>
</body>

flex-wrap

这个属性定义多余元素是否换行若是换行每一行每个主轴是否会沿着交叉轴方向排布值:

nowrap(弹性子元素默认会收缩)
wrap(每个主轴会沿着交叉轴方向排布)
wrap-reverse(每个主轴会沿着交叉轴相反方向排布)

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        flex-direction: row;
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        flex-wrap: wrap;
        /* flex-wrap: wrap-reverse; */
    }
    .container .item{
        width: 20%;
        height: 100px;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
</div>

nowrap wrap

wrap-reverse 在这个属性中当值为 wrap 和 wrap-reverse 时 , 我们要将1号主轴与2号主轴看做一个整体 , 看这两个整体在交叉轴上的排布关系

flex-flow

这个属性是flex-direction 与 flex-wrap的简写形式.
flow : 流动么, flex-direction就是流动的方向 , flex-wrap就是流动的道路 , 帮助理解哈哈哈哈 .

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
    }
    .container .item{
        width: 20%;
        height: 100px;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
    </div>
</body>

其他的组合就不一一测试了 , 大家可以自己试试 , 4*3 = 12种可能别晕了哈哈哈哈

justify-content

翻译过来就是内容对齐
这个属性定义(每个主轴容器内)弹性子元素在主轴方向上的排布方式(也可以理解为分配剩余空间的方式)
值:

flex-start(默认) 弹性子元素在主轴方向上紧靠主轴的起点排布
flex-end 弹性子元素在主轴方向上紧靠主轴的终点排布
center 弹性子元素在主轴方向上居中排布
space-between 弹性子元素在主轴方向上两两之间平均分配剩余空间
space-around 弹性子元素在主轴方向上使剩余空间平均分配在自身两侧 其实单词的意思就解释的很明白了( 虽然我英语差的一批 , 但是我们不要放弃学习呀!!汗颜 )

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
    }
    .container .item{
        width: 20%;
        height: 100px;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
    </div>
</body>

flex-start flex-end center space-between space-around

align-items

每条主轴在交叉轴上的对齐方式.
在说这个属性之前我想解释的是另一点 , 每个主轴占据的空间实际上是多大呢? 实际上默认是平分交叉轴方向上的空间 , 这和下一个属性有关 , 如下图:

然后再解释这个属性:每个主轴内的弹性子元素在交叉轴方向上(这里可以理解垂直方向上)的排布方式 值:

flex-start(默认) 紧靠主轴空间内交叉轴的起点方向
flex-end 紧靠主轴空间内交叉轴的终点方向
center 主轴空间内交叉轴的居中位置
baseline 以主轴空间内弹性元素的基线对齐
stretch 将主轴空间内每个弹性子元素沿交叉轴方向拉伸填满主轴(前提示子元素未设置高度)

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        align-items: flex-start;
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        /* align-items: stretch; */
    }
    .container .item{
        width: 20%;
        height: 100px;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<body>
<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item" style="font-size: 30px;">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item"style="font-size: 30px;">item6</div>
    <div class="item">item7</div>
</div>
</body>

flex-start flex-end center baseline stretch

align-content

这个属性我们可以这样理解,先将每一个主轴看做一个整体 . 这个属性配置的是所有主轴在交叉轴方向上的排布方式.
值:

stretch(默认) 默认拉伸每一根主轴来平分交叉轴方向上的空间
flex-start 每根主轴作为一个整体紧靠交叉轴方向起点进行排布
flex-end 每根主轴作为一个整体紧靠交叉轴方向终点进行排布
center 所有主轴作为一个整体在交叉轴方向上居中排布
space-between 每根主轴作为一个整体,两两主轴之间平分剩余空间
space-around 每根主轴作为一个整体 , 剩余空间在交叉轴方向上分布在每根主轴的两侧解释:
当只有一根主轴时不论 align-content取什么值 , 主轴都默认在交叉轴方向上占满所有空间
当有多个主轴时 , 除了默认情况外(取stretch) , 每根主轴所占据的空间 , 由其内部的弹性子元素中的最大高度撑开,以下代码证明:(先撑开 , 在 stretch占满撑开的空间)

 <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        align-content: flex-start;
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
    }
    .container .item{
        width: 20%;
        height: auto;
        background-color: skyblue;
        margin: 10px;

    }
</style>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item" style="font-size: 30px;height: 150px;">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item"style="font-size: 30px;height: 200px;">item6</div>
        <div class="item">item7</div>
    </div>
</body>

除了item3与item6其他子元素高度都是auto,又因为我们设置父元素align-items:stretch;所以出现了如下情况正好佐证我们上述所讲

有了这个下面就好解释了 stretch flex-start flex-end center space-between space-around

弹性子元素属性

这个属性是用来为每个子元素做个性化定制的

order
flex-grow
flex-shrink
flex-basic
flex
align-self 在说明弹性子元素之前先修改一下代码:为每个弹性子元素添加类名 item1-7

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;
    }
    .container .item{
        width: 20%;
        height: auto;
        background-color: skyblue;
        margin: 10px;
    }
</style>
<body>
<div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3" style="font-size: 30px;height: 150px;">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
    <div class="item item6"style="font-size: 30px;height: 200px;">item6</div>
    <div class="item item7">item7</div>
</div>
</body>

order

这个属性是用来定义弹性子元素在容器内的顺序的 , 子元素按order的属性值从小到大依次向后排列.默认是0
值:
0(默认) number (任意数字)

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;
    }
    .container .item{
        width: 20%;
        height: auto;
        background-color: skyblue;
        margin: 10px;
    }
    .item1{
        order: 7;
    }
    .item2{
        order: 6;
    }
    .item3{
        order: 5;
    }
    .item4{
        order: 4;
    }
    .item5{
        order: 3;
    }
    .item6{
        order: 2;
    }
    .item7{
        order: 0;
    }
</style>
<!--html结构不变-->

将第一个html弹性子元素,放在最后显示(图上的标注不太准确 , 应该说是大于所有其他弹性子元素的order属性值) 将弹性子元素逆序排序

flex-grow

这个属性决定弹性子元素将如何分配其所在主轴的在主轴方向的剩余空间(也可称之为扩展比) , 我们将在下面的实验中把order变为默认值以便咱们容易观察.
值:

0默认值
number(必须是数字值)

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;
    }
    .container .item{
        width: 20%;
        height: auto;
        background-color: skyblue;
        margin: 10px;
    }
    .item1{
        order: 0;
    }
    .item2{
        order: 0;
        flex-grow:2;
    }
    .item3{
        order: 0;
        flex-grow: 1;
    }
    .item4{
        order: 0;
    }
    .item5{
        order: 0;
    }
    .item6{
        order: 0;
    }
    .item7{
        order: 0;
        flex-grow: 1;
    }
</style>
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3" style="font-size: 30px;height: 150px;">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
        <div class="item item6"style="font-size: 30px;height: 200px;">item6</div>
        <div class="item item7">item7</div>
    </div>
</body>

以第二个图为例 , 实际上是这样计算的 , sum(每个主轴内所有弹性子元素的flex-grow值)得出这个和为count , 每个项目各占剩余空间*(每个弹性子元素的flex-grow值/count)

flex-shrink

这个属性配置当主轴空间在主轴方向上不够容纳那么多弹性子元素时,每个弹性子元素的收缩比
理论上我们要将flex-wrap设置为nowrap才会用到这个属性 , 因为若是空间不够就换行了 , 就不存在所谓的收缩了.
重新改变一下属性 , 将每个弹性子元素重新设置高度为150px,flex-wrap:nowrap.
值:

1(默认值) 所有项目默认平均缩小相同的超出空间的比例
0 不收缩
number (按其他比例收缩) 解释:
这个属性实际上是在flex-basis这个属性的基础上进行的,而不是单纯的参照比例进行收缩 . flex-basis默认值是auto也就是 "参照我的width和height属性" , 这里先解释到这 , 使用一个新的布局来演示这个属性

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row nowrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        align-content: center;
        /* align-content: space-between; */
        /* align-content: space-around; */
    }
    .container .item{
        width: 20%;
        height: 150px;
        background-color: skyblue;
    }
    .item1{
        order: 0;
        flex-shrink: 1;
    }
    .item2{
        order: 0;
        flex-grow: 0;
        flex-shrink: 1;
    }
    .item3{
        order: 0;
        flex-grow: 0;
        flex-shrink: 1;
    }
    .item4{
        order: 0;
        flex-shrink: 0;
    }
    .item5{
        order: 0;
    }
    .item6{
        order: 0;
    }
    .item7{
        order: 0;
        flex-grow: 1;
    }
</style>
<body>
    <div class="container">
        <div class="item item1" style="width: 25%;background-color: skyblue;">item1</div>
        <div class="item item2" style="width: 25%;background-color: purple;">item2</div>
        <div class="item item3" style="width: 50%;background-color: greenyellow;">item3</div>
        <!-- <div class="item item4" style="width: 180px;background-color: rgb(47, 255, 186);">item4</div> -->
    </div>
</body>

我们在此基础上新增一个item4 , 并将其flex-shrink设为0 , 不收缩 , 也就是说原本的三个元素要在自身flex-basis的基础上进行收缩 , 为新加的元素挤出一个180px的宽度来.

<body>
    <div class="container">
        <div class="item item1" style="width: 25%;background-color: skyblue;">item1</div>
        <div class="item item2" style="width: 25%;background-color: purple;">item2</div>
        <div class="item item3" style="width: 50%;background-color: greenyellow;">item3</div>
        <div class="item item4" style="width: 180px;background-color: rgb(47, 255, 186);">item4</div>
    </div>
</body>

细心的同学会发现, 哎? 怎么不是预想的各自收缩60px; 便于解释 , 我先说两个自创的名词收缩比与基础比 , 收缩比就是我们设置的flex-shrink的收缩比例, 基础比就是flex-basic的基础比例(在这就是width的比例)
实际上三个元素的实际收缩比 = 收缩比\*基础比
item1 : item2 : item3 = item1的实际收缩比 : item2的实际收缩比 : item3的实际收缩比
也就是 : (1/3*1/4) : (1/3*1/4) : (1/3*2/4) ==> 1:1:2
再来测试一下: 分别将item1 item2 item3的flex-shrink设置为4 , 4 , 1:

<style>
    .item1{
        order: 0;
        flex-shrink: 4;
    }
    .item2{
        order: 0;
        flex-grow: 0;
        flex-shrink: 4;
    }
    .item3{
        order: 0;
        flex-grow: 0;
        flex-shrink: 1;
    }
</style>

根据上面的公式计算实际收缩比为2:2:1

得证!这里不要去联想flex-grow,那个属性就很单纯.flex-grow的值就是实际伸展比.

flex-basis

元素的基础值 , 目前只发现在flex-shrink中被用到 .
值:

auto 参照元素的width与heigh
px 像素值
% 百分比解释: 当我们同时设置flex-basis(值为px 或百分比)与width或height(flex-firection:column)时会以flex-basis的值为准:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row nowrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        /* align-content: stretch; */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        align-content: center;
        /* align-content: space-between; */
        /* align-content: space-around; */
    }
    .container .item{
        width: 20%;
        height: 150px;
        background-color: skyblue;
    }
    .item1{
        order: 0;
        flex-grow: 0;
        flex-basis: 500px;
        flex-shrink: 4;
    }
    .item2{
        order: 0;
        flex-grow: 0;
        flex-basis: 500px;
        flex-shrink: 4;
    }
    .item3{
        order: 0;
        flex-grow: 0;
        flex-basis: 500px;
        flex-shrink: 1;
    }
    .item4{
        order: 0;
        flex-shrink: 0;
    }
    .item5{
        order: 0;
    }
    .item6{
        order: 0;
    }
    .item7{
        order: 0;
        flex-grow: 1;
    }
</style>
<body>
    <div class="container">
        <div class="item item1" style="width: 200px;background-color: skyblue;">item1</div>
        <div class="item item2" style="width: 200px;background-color: purple;">item2</div>
        <div class="item item3" style="width: 400px;background-color: greenyellow;">item3</div>
        <!-- <div class="item item4" style="width: 180px;background-color: rgb(47, 255, 186);">item4</div> -->
    </div>
</body>

得证!!

flex

这个属性是flex-grow,flex-shrink,flex-basis的缩写.
值: flex:flex-grow flex-shrink flex-basis

align-self

这个属性可以理解为对align-items更精细化的控制值:

auto 父元素的align-items值
flex-start
flex-end
center 5.baseline (这个效果目前我还不太理解)

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display:flex;
        width:50%;
        margin: 50px auto 0;
        height:600px;
        background-color:pink;
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row wrap;
        justify-content: flex-start;
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* align-items: baseline; */
        align-items: stretch;
        align-content: stretch;
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
    }
    .container .item{
        width: 20%;
        height: auto;
        background-color: skyblue;
        margin: 10px;
    }
    .item1{
        order: 0;
    }
    .item2{
        order: 0;
        flex-grow: 0;
    }
    .item3{
        order: 0;
        flex-grow: 0;
        align-self: flex-end;
    }
    .item4{
        order: 0;
    }
    .item5{
        order: 0;
    }
    .item6{
        order: 0;
        align-self: center;
    }
    .item7{
        order: 0;
        flex-grow: 1;
    }
</style>
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3" style="font-size: 30px;height: 150px;">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
        <div class="item item6"style="font-size: 30px;height: 150px;">item6</div>
        <div class="item item7">item7</div>
    </div>
</body>

好了 , 我所知道的就这些了 , 好累,哈哈哈哈哈!!!