1 flex布局（弹性布局、伸缩布局）
/* 设置当前盒子为弹性盒子*/
display: flex;
/* 设置主轴方向的对齐方式：justify-content */
justify-content: center;
/* 设置侧轴方向的对齐方式：align-items */
align-items: center;
给父元素设置的相关属性
(1)主轴方向 flex-direction
| 取值 |
效果（主轴方向） |
| row |
水平向右（默认） |
| row-reverse |
水平向左 |
| column |
垂直向下 |
| column-reverse |
垂直向上 |
(2)主轴对齐方式 justify-content
| 取值 |
效果 |
| flex-start |
向主轴开始方向对齐 |
| flex-end |
向主轴结束方向对齐 |
| center |
居中对齐 |
| space-around |
让空白环绕盒子显示 |
| space-between |
空白只在两者之间显示 |
| space-evenly |
空白均分 |
(3)单行侧轴对齐方式 align-items
| 取值 |
效果 |
| flex-start |
向侧轴开始方向对齐 |
| flex-end |
向侧轴结束方向对齐 |
| center |
居中对齐 |
| stretch |
拉伸显示（默认值） |
(4)是否换行 flex-wrap
| 取值 |
效果 |
| wrap |
换行 |
| nowrap |
不换行（默认值） |
(5)多行侧轴对齐方式 align-content
| 取值 |
效果 |
| flex-start |
向侧轴开始方向对齐 |
| flex-end |
向侧轴结束方向对齐 |
| center |
居中对齐 |
| space-around |
让空白环绕盒子显示 |
| space-between |
空白只在盒子之间显示 |
| stretch |
子元素高度拉伸显示（只有没设高才有效果） |
2 给子元素设置的相关属性~
- 分配子元素空间 flex flex:份数;
- 子元素排序 order设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0
- 单个子元素侧轴对齐方式 align-self
| 取值 |
效果 |
| flex-start |
向侧轴开始方向对齐（默认相当于顶部对齐） |
| flex-end |
向侧轴结束方向对齐（默认相当于底部对齐） |
| center |
居中对齐 |
| stretch |
子元素高度拉伸显示（只有没设高才有效果） |
