CSS布局：Flex布局
flex布局又称为弹性布局。弹性布局相关属性分为四大类目，分别为流向控制、对齐方式、顺序控制、弹性设置。
开始
给元素设置display:flex，此时弹性布局就会被创建，被设置为flex的元素称为flex容器，其子元素称之为flex子项。
flex元素的子项拥有以下特性
- 都是块级元素
- flex子项浮动失效
- flex子项的margin不会合并
- flex子项是格式化的尺寸：子项经过精确计算、应用某个计算值之后的尺寸
- flex子项如果被设置为绝对定位，则会脱离弹性布局
流向控制
flex-direction
flex-direction:row | column | row-reverse | column-reverse;
flex-direction属性。
用来控制flex子项整体布局方向，决定是从左往右排列还是从右往左排列，是从上往下排列还是从下往上排列。
display:flex;
flex-direction:row;
当设置为row时，flex子项水平排列，是默认值。与之对应的还有row-reverse，同样是水平排列，不过顺序相反。
当设置为column时，flex子项垂直排列。与之对应的还有column-reverse，同样是垂直排列，不过顺序相反。
flex-wrap属性用来控制flex子项是单行显示还是换行显示，以及在换行情况下，每一行内容是否在垂直方向的反方向显示。
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
当设置为wrap时，flex容器宽度不足的时候，flex子项会换行显示。
wrap-reverse表示宽度不足的时候，flex子项会换行显示，但是flex子项是从下往上开始排列的，也就是原本换行到下面一行的flex子项现在换行到上面一行。
flex-flow属性是flex-direction和flex-wrap的缩写属性。
flex-direction属性值写在前面，flex-wrap属性值写在后面。
flex-flow: ||
对齐设置
水平对齐
水平方向的对齐使用justify-content
justify-content：整体布局的水平对齐设置。
justify-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly;
normal是初始值，表示根据环境不同，可以采用不同的对齐表现。
flex-start可以看成默认值，它是一个逻辑CSS属性值，与文档流方向相关，默认表现为整体布局左对齐。
flex-end是逻辑CSS属性值，与文档流方向相关，默认表现为整体布局右对齐。
center表现为整体布局居中对齐。
space-between表示多余的空白间距只在元素中间区域分配，视觉上表现为两端对齐效果。
space-around表示每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终在视觉表现上边缘两侧的空白只有中间空白宽度的一半。
space-evenly表示每个flex子项两侧空白间距完全相等。
垂直对齐
垂直方向的对齐使用align-items、align-self、align-content。
align-items是设置在flex容器元素上的，控制所有flex子项的垂直对齐方式。
align-self属性是设置在具体的某一个flex子项上的。
align-content属性将所有flex子项作为一个整体进行垂直对齐设置。
align-items: stretch | flex-start | flex-end | center | baseline;
align-self: auto | stretch | flex-start | flex-end | center | baseline;
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
auto是align-self属性的默认值，表示flex子项的垂直对齐方式是由flex容器的align-items属性值决定的。
stretch可以看成弹性布局中align-items属性的默认值，表示flex子项在垂直方向上拉伸。
flex-start是逻辑CSS属性值，与文档流方向相关，默认表现为flex子项顶部对齐。
flex-end是逻辑CSS属性值，与文档流方向相关，默认表现为flex子项底部对齐。
center表示flex子项都是垂直居中对齐。
baseline表示flex子项参与基线对齐。
space-between表现为上下两行两端对齐，剩下的每一行元素等分剩余空间。
space-around表现为每一行元素上下都享有独立不重叠的空白空间。
space-evenly表现为每一行元素上下的空白空间的大小都是一致的。
顺序控制
order
我们可以通过设置order属性来改变某一个flex子项的排序位置。
order: ;
order属性的值是整数值，默认值是 0，所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，则可以设置比0小的整数。
弹性设置
flex
flex属性是弹性布局的精髓，因为弹性布局的“弹性”就是flex属性的作用。
flex属性是flex-grow、flex-shrink和flex-basis这3个CSS属性的缩写。
flex: auto;
flex: none;
flex: <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>
其中双管道符“||”表示或者，可以无序，也可以同时存在；问号“?”表示0个或1个。
flex-basis
flex-basis属性用来分配基础数量的大小
flex-basis: | auto;
flex-basis属性则是指定的分配基础尺寸，默认值是auto。
在弹性布局中，一个flex子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大最小尺寸共同作用的结果。
flex-basis属性的尺寸是作用在content-box上的，这一点和width属性是一样的。
如果flex-basis属性和width属性同时设置了具体的数值，width属性值会被忽略，优先使用flex-basis的属性值作为基础尺寸。
如果flex-basis的属性值是初始值auto，则会使用width属性设置的长度值作为基础尺寸。
如果flex-basis和width的属性值都是auto，则会使用flex子项的最大内容宽度作为基础尺寸，此时称为“内容尺寸”
flex-grow
flex-grow属性指定了容器剩余空间多余时候的分配规则，默认值是0，表示多余空间不分配
flex-grow: ;
flex-grow属性的值是数值，可以是小数，默认值是 0。
分配规则：
- 所有剩余空间总量是1
- 如果只有1个flex子项设置了flex-grow属性值，则有两种分配情况
- 如果flex-grow属性值小于1，则flex子项扩展的空间就是总剩余空间和这个比例的计算值
- 如果flex-grow属性值大于1，则flex子项独享所有剩余空间
- 如果有多个子项flex设置了flex-grow属性值，则有两种分配情况
- 如果flex-grow属性值的总和小于1，则每个flex子项扩展的空间就是总剩余空间和当前flex子项设置的flex-grow比例的计算值
- 如果flex-grow属性值的总和大于1，则所有剩余空间被利用，分配比例就是各个flex子项的flex-grow属性值的比例
flex-shrink
flex-shrink属性指定了容器剩余空间不足时候的分配规则，默认值是1，表示空间不足要分配。
flex-shrink: ;
flex-shrink的值是 数值，默认值是 1 。
分配规则：
- 如果只有1个flex子项设置了flex-shrink属性值，则有两种分配情况
- 如果flex-shrink属性值小于1，则收缩不完全，会有一部分内容溢出flex容器
- 如果flex-shrink属性值大于等于1，则收缩完全，元素正好填满flex容器
- 如果多个flex子项设置了flex-shrink属性，则有两种分配情况
- 如果flex-shrink属性值的总和小于1，则收缩不完全，每个元素收缩尺寸和“完全收缩的尺寸”的比例就是该元素的flex-shrink属性的值
- 如果flex-shrink属性值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和flex-shrink属性值的比例一样