flex 属性众多,记住以下几个就够用了,尽可能使用简写
1. 术语
- 容器: 具有
display:flex属性元素 - 项目: flex 容器的”子元素”
- 主轴: 项目排列的轴线
- 交叉轴: 与主轴垂直的轴线
2. 容器属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex-flow | 主轴方向与换行方式 |
| 2 | justify-content | 项目在主轴上的对齐方式 |
| 3 | align-items | 项目在交叉轴上的对齐方式 |
| 4 | align-content | 项目在多行容器中的对齐方式 |
3. 项目属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex | 项目的缩放比例与基准宽度 |
| 3 | align-self | 单个项目在交叉轴上的对齐方式 |
| 4 | order | 项目在主轴上排列顺序 |