弹性盒子布局
弹性盒子（Flexbox）是一种灵活的线性容器。如果希望元素在水平或垂直方向依次排列，并且能够根据容器尺寸自动调整元素位置和大小，可以使用弹性盒子布局。
弹性盒子布局包括两部分：flex容器和flex元素。如果一个元素的 display 属性是 flex ，它就成为flex容器，它的下级元素成为flex元素。flex容器是块元素，独占一行。如果不希望flex容器产生换行，可以将容器的 display 属性设置为 inline-flex 。
弹性盒子是一种线性容器，这条线叫做主轴。沿着主轴方向，flex元素在flex容器中依次排列。主轴方向由flex容器的 flex-direction 属性决定，值可以是
| flex-direction | 排列方向 |
|---|---|
| row（默认值） | 左起水平向右 |
| row-reverse | 右起水平向左 |
| column | 上起垂直向下 |
| column-reverse | 下起垂直向上 |
flex元素的宽度（高度）由flex元素的属性 flex-basis （优先级高）或 width （ height ）决定。flex元素未必总能恰好排满主轴，通常需要处理“排不满”和“排不下”两种情况。
“排不满”有两种处理方法：一是拉伸元素覆盖剩余空间，二是用空白填充剩余空间。
| 处理方法 | 元素 | 属性值 |
|---|---|---|
| 拉伸元素 | flex元素 | flex-grow: 1; |
| 填充空白-在终点填充 | flex容器 | justify-content: start; |
| 填充空白-在起点填充 | flex容器 | justify-content: end; |
| 填充空白-在两端填充 | flex容器 | justify-content: center; |
| 填充空白-在元素周围填充 | flex容器 | justify-content: space-betwwen; |
| 填充空白-在元素周围填充 | flex容器 | justify-content: space-around; |
| 填充空白-在元素周围填充 | flex容器 | justify-content: space-evenly; |
如果主轴没有排满，剩余空间按比例分配给各个flex元素，权重就是元素的 flex-grow 值。 flex-grow 默认值是0，表示不会为元素分配剩余空间。
如果采用填充空白的方法，需要设置flex容器的 justify-content 属性，取值如下：
| justify-content | flex元素排列方式 |
|---|---|
| start（默认值） | 第一个在行首，紧邻排列。 |
| end | 最后一个在行尾，紧邻排列。 |
| center | 居中紧邻排列。 |
| space-between | 第一个行首，最后一个行尾，均匀排列。 |
| space-around | 均匀排列，元素之间距离相同，均是容器与（首尾）元素距离的2倍。 |
| space-evenly | 均匀排列，元素之间、容器与（首尾）元素的距离相同。 |
“排不下”有五种处理方法：一是收缩元素适配主轴长度，二是换行，三是溢出，四是截断，五是使用滚动轴。
| 处理方法 | 元素 | 属性值 |
|---|---|---|
| 收缩元素 | flex元素 | flex-shrink: 1; |
| 换行 | flex容器 | flex-wrap: wrap; |
| 溢出 | flex容器 | flex-wrap: nowrap; |
| 截断 | flex容器 | flex-wrap: nowrap; overflow: hidden; |
| 滚动轴 | flex容器 | flex-wrap: nowrap; overflow: scroll; |
flex-shrink 和 flex-grow 相对的属性，当主轴空间不足时，元素以 flex-shrink 为比例收缩。区别在于， flex-shrink 默认值是1，即在默认情况下，均匀收缩flex元素以适配主轴长度。 flex-wrap 属性用于控制换行方式，如果主轴排满了，后续元素会在新一行（列）上继续排列。新的一行（列）默认排列在原行（列）的下方（右侧），这个方向叫做交叉轴方向。交叉轴是与主轴垂直且向下或向右的方向。
| 值 | 说明 |
|---|---|
| wrap | 换行（列）。新行（列）沿交叉轴方向（下方/右侧）排列。 |
| nowrap（默认值） | 不换行（列）。 |
| wrap-reverse | 换行（列）。新行（列）沿交叉轴方向反向（上方/左侧）排列。 |
在不换行（列）的情况下，通过控制flex容器的 overflow 属性，可以实现溢出、截断或滚动轴效果。
| visible（默认值） | 溢出。显示超出容器尺寸的内容，侵入其他元素的盒模型空间。 |
| hidden | 截断。不显示超出容器尺寸的内容。 |
| scroll | 滚动条。提供滚动条，拖动时显示超出容器尺寸的内容。 |
讲完了主轴上元素的排列方式，现在介绍元素在交叉轴方向的对齐方式，它由flex容器的 align-items 属性决定。
| align-items | 说明 |
|---|---|
| start（默认值） | 按交叉轴起点对齐 |
| end | 按交叉轴终点对齐 |
| center | 按交叉轴居中对齐 |
| baseline | 按文字基线对齐 |
| stretch | 拉伸元素，填充容器高度 |
如果某个flex元素希望拥有独立的对齐方式，可以使用flex元素的 align-self 属性，它会在flex元素中覆盖flex容器的 align-items 属性。两个属性取值是一样的。
flex元素默认按照元素在HTML文档中的顺序排列。调整 order 属性可以修改flex元素顺序，越大越靠后，默认值是0。
为了简化编码，CSS提供了关于flex的缩写。
| 元素 | 缩写 | 值 | 含义 |
|---|---|---|---|
| flex元素 | flex: 2; | 单值，无单位数字 | flex-grow |
flex: 30px; | 单值，距离 | flex-basis | |
flex: 1 30px; | 双值 | flex-grow flex-shrink | |
flex: 2 2 10%; | 三值 | flex-grow flex-shrink flex-basis | |
| flex容器 | flex-flow: row; | 单值 | flex-direction |
flex-flow: wrap; | 单值 | flex-wrap | |
flex-flow: column wrap; | 双值 | flex-direction flex-wrap |