flex布局极大的提高了我们布局的效率，更简单、灵活。
display: flex; 一定要给亲爸爸加。
主轴对齐方式
| flex-start | 默认值, 起点开始依次排列 | |
|---|---|---|
| flex-end | 终点开始依次排列 | |
center | 沿主轴居中排列 | 经常用于让一个盒子水平居中 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 | 记住2倍 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 | 两侧没缝隙 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 | 记住空隙一样大 |
侧轴对齐方式
| flex-start | 起点开始依次排列 |
|---|---|
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
伸缩比
把父盒子分为若干份数，每个子盒子各占几份。
flex:1; 一定给子盒子加.比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。
设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
row | 行, 水平(默认值) |
|---|---|
column | *列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
弹性盒子换行
特性： 给父亲添加了
display: flex;所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。
弹性盒子换行显示 : flex-wrap:wrap
设置侧轴对齐方式
注意:
- 此处设置侧轴多行的垂直对齐方式。 align-content（少）
- 和前面学过的
align-items（侧轴单行垂直对齐） （多） - align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
- content 主轴 justify-content align-content 侧轴多行对齐
align-content：center；
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
