flex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
display: flex; 一定要给亲爸爸加。
主轴对齐方式justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值,起点开始排列 |
| flex-end | 终点开始排列 |
| center | 主轴居中排列 |
| space-around | 弹性盒子均匀排列在主轴上,空白部分均匀地分布在弹性盒子的两侧(两侧的盒子离父盒子的宽度是盒子之间的宽度的1/2) |
| space-between | 弹性盒子均匀排列在主轴上,空白部分均匀地分布在盒子之间,盒子靠两侧 |
| space-evenly | 弹性盒子与容器之间等间距 |
如果非要问我那个常用，我只能说是 space-between
记忆：
- 两侧没缝隙是 between
- 缝隙一样大是 evenly
- 2倍缝隙是 around
侧轴对齐方式
1.align-items(单行)
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
2.align-content(多行)
| 属性值 | 作用 | |
|---|---|---|
| flex-start | 起点开始依次排列 | |
| flex-end | 终点开始依次排列 | |
| center | 沿侧轴居中排列 | |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 | |
| space-between | 弹性盒子均匀排列在主轴上,空白部分均匀地分布在盒子之间,盒子靠两侧 | |
| space-around | space-around | 弹性盒子均匀排列在主轴上,空白部分均匀地分布在弹性盒子的两侧(两侧的盒子离父盒子的宽度是盒子之间的宽度的1/2) |
| space-evenly | 弹性盒子与容器之间等间距 |
设置主轴方向(flex-direction)
主轴默认是水平方向, 侧轴默认是垂直方向
| 属性值 | 作用 |
|---|---|
| row | 行,水平(默认值) |
| column | 列,垂直 |
| row-reverse | 行,从右向左 |
| column-reverse | 列,从下到上 |
| 语法: |
flex-direction:column;
弹性盒子换行
特性:给父元素(容器)添加display:flex,弹性盒子会挤在一行显示,不会换行,设置宽度也没用.
语法:
flex-wrap:wrap;
