弹性盒布局
弹性盒布局相对于浮动和定位来讲更加自动化一点，比如以下场景：“让3个div横着排，这三个div的总长度等于浏览器的宽度，并且随浏览器宽度的改变而改变”。没学弹性布局前，我们可能会利用float或者设置display:inline-block,让三个div横着排，再用百分比设置宽度，这样可以实现，但是比较繁琐还要解决副作用的问题。
注：设置Flex布局后，子元素的float,clear,vertical-align属性将效。
给一个盒子设置display:flex属性后，它所有的子元素都成为flex弹性元素（不包含孙元素，不包含绝对定位元素）。
flex-direction,（决定主轴方向）
| 属性值 | 说明 |
|---|---|
| row（默认值） | 主轴方向为水平，flex元素从左往右排列 |
| row-reverse | 主轴方向为水平，flex元素从右往左排列 |
| column | 主轴方向为垂直，flex元素从上往下排列 |
| column-reverse | 主轴方向为垂直，flex元素从下往上排列 |
用flex-direction设置主轴方向，如果值row，则主轴方向为水平方向，那么垂直方向自然就是辅轴了。如果值column，则主轴方向为垂直方向，那么水平方向自然就是副轴了
flex-wrap
| 属性值 | 说明 |
|---|---|
| nowrap（默认值） | flex元素不会自动换行 |
| wrap | flex元素会换行 |
| wrap-reverse | 反转换行（很少使用） |
注：flex-direction和flex-wrap可以简写为：flex-flow
默认值为row nowrap；
justify-content(当横向为主轴时，flex元素在主轴上的分布方式)
| 属性值 | 说明 |
|---|---|
| flex-start（默认值） | 分布在左边 |
| flex-end | 分布在右边 |
| center | 居中分布 |
| space-between | 两端分布 |
| space-around | 左右外边距相等分布 |
| space-evenly | 均匀分布，每个元素间的间隔相等 |
align-content(当横向为主轴时，flex元素在辅轴上的分布方式，适合多行)
| 属性值 | 说明 |
|---|---|
| stretch（默认值） | 如果弹性元素未设置高度或设置为auto，将flex元素拉长 |
| flex-start（默认值） | 在辅轴的开始 |
| flex-end | 在辅轴的结尾 |
| center | 在辅轴的中间 |
| space-between | 两端分布 |
| space-around | 每个flex元素两侧的间隔相等 |
| space-evenly | 均匀分布，每个元素间的间隔相等 |
align-items(当横向为主轴时，flex元素在辅轴上的分布方式，适合单行)
| 属性值 | 说明 |
|---|---|
| stretch（默认值） | 如果弹性元素未设置高度或设置为auto，将flex元素拉长 |
| flex-start | 上对齐 |
| flex-end | 底对齐 |
| center | 居中对齐 |
flex-grow
当flex容器有剩余空间时，flex元素是否放大
默认值：0，即不占据剩余空间
值为1时，占据所有剩余空间
flex-shrink
当容器空间不足时，flex元素是否缩小
默认值：1 ，表示：如果容器空间不足，flex元素将等比例缩小。
如果值为 0 ，表示：如果容器空间不足，flex元素将不缩小。
flex-basis
定义每一个flex元素的大小，
它的默认值为auto，即项目的本来大小
如果设置了flex-basis，width就没用了
flex简写
代表flex-grow, flex-shrink 和 flex-basis的简写
默认值为0 1 auto
order
弹性元素排在主轴上的顺序，数值越小越靠前。
是一个整数 ，默认值为0；
align-self
设置单个flex元素的在辅轴对齐方式，可覆盖align-items属性。