Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。
flex有四大概念：容器 项目 主轴 交叉轴
容器：采用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”。
例如：
<div class="container" style=" display:flex;">
</div>
给这个div加上一个display：flex，它就变成了容器
容器默认存在两个轴：主轴、交叉轴
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
交叉轴：与主轴垂直的那个轴
项目：容器的直接子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。
例如：
<div class="container" style=" display:flex;">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
其中的三个直接子元素div就是项目
容器的相关属性：
1、flex-direction：改变主轴方向
column-reverse:表示列的反方向作为主轴的正方向，主轴为垂直方向，起点在下沿
column:表示列作为主轴，主轴为垂直方向，起点在上沿
row:表示行作为主轴，主轴为水平方向，起点在左端
row-reverse：表示行的反方向作为主轴的正方向，主轴为水平方向，起点在右端
2、flex-wrap:项目足够多的时候，是否换行。
换行：wrap 不换行：nowrap 换行反转：wrap-reverse
不换行的情况：
换行的情况：
换行反转的情况：
3、* flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4、justify-content:处理富余空间，项目在主轴上的对齐方式 flex-start：默认左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
flex-start的情况：
flex-end的情况：
center的情况：
space-between的情况：
space-around的情况：
5、align-items: 定义项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start的情况：
flex-end的情况：
center的情况：
baseline的情况：
stretch的情况：
例如：
.container{
display:flex;
width: 500px;
height: 500px;
border: 1px solid red;
align-items: stretch;
}
.son{
width: 100px;
height: auto;
}
<div class="container">
<div class="son" style="background-color: royalblue;">d</div>
<div class="son" style="background-color: palegreen;">e</div>
<div class="son" style="background-color: gainsboro;">f</div>
</div>
6、align-content：当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
flex-start的情况：
flex-end的情况：
center的情况：
space-between的情况
space-around的情况：
1、order：是用来改变项目的顺序的，数值越小，排列越靠前，默认为0.
例如：
<div class="son" style="background-color: royalblue;order: 1">1</div>
<div class="son" style="background-color: palegreen;order: 3">3</div>
<div class="son" style="background-color: gainsboro;order: 2">2</div>
<div class="son" style="background-color: peru;">d</div>
2、flex-grow：让某个项目生长，定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目为1，则牵着占据的剩余空间将比其他项多一倍
例如：
默认值为0的情况
flex-grow=1的情况：
3、flex-shrink：让某个项目压缩，定义了项目的缩小比例，默认为1，即如果空间不足，
该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
默认为1的情况（容器宽度为500px，5个宽度为100px的项目）：
默认为1的情况（容器宽度为500px，6个宽度为100px的项目）：
一个项目的flex-shrink属性为0，其他项目都为1的情况：
4、flex-basis：项目在主轴上占据的大小，flex-basis属性定义了在分配多余空间之前，
项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如
350px），则项目将占据固定空间。
例如：
<div class="son" style="background-color: plum;">b</div>
<div class="son" style="background-color: rosybrown;flex-basis: 200px;">c</div>
<div class="son" style="background-color: rebeccapurple;">c</div>
5、flex：上面几个属性的简写方式
6、align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式。
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，
如果没有父元素，等同于stretch。
auto | flex-start | flex-end | center | baseline | stretch
flex-start的情况：
flex-center的情况：
flex-end的情况：
