Flex布局（弹性盒子）
DIV+CSS布局样式的重点，弹性盒子必备考点
概念
是一种可以避免浮动脱标问题，能够让布局更简单、更灵活的布局。
父元素设置display：flex;子元素可以自动的挤压与伸缩
主轴对齐方式
属性：justify-content
| 属性值 | 说明 |
|---|---|
| flex-start | 从起点开始依次排列 |
| flex-end | 从终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分布在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子和容器之间间距相等 |
侧轴对齐方式
属性：align-items
| 属性值 | 说明 |
|---|---|
| flex-start | 从起点开始依次排列 |
| flex-end | 从终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 弹性盒子沿着主轴先被 拉伸至铺满容器 |
伸缩比
伸缩比是flex属性，设置弹性盒子的尺寸，只占用父盒子剩余的尺寸。一般都是flex:1
主轴方向的修改
改变内容的排列顺序与方向
属性: flex-direction
| 属性值 | 说明 |
|---|---|
| row | 水平 |
| column | 垂直 |
| row-reverse | 水平(内容顺序反转) |
| column-reverse | 垂直(内容顺序反转) |
