Flex布局/弹性布局：
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。非常适合结构化布局
设置方式
父元素添加 display: flex ，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 交叉轴/侧轴
主轴对齐方式
justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 沿主轴均匀排列，空白间距均分在盒子两侧 |
| space-between | 沿主轴均匀排列，空白间距均分在盒子之间 |
| space-evenly | 沿主轴均匀排列，空白间距处处相等（盒子与容器之间） |
侧轴对齐方式
align-items: 添加至弹性容器内
align-self: 添加至弹性盒子
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 |
伸缩比
flex: 数值
- 取值：整数
- 注意：只占用父盒子剩余尺寸
主轴方向
flex-direction
| row | 行, 水平(默认值) |
| column | 列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
换行
flex-wrap: wrap
