目录
- 属性
- 1. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- 2. aligin-items 侧轴对齐（y轴）
- 3. align-self 侧轴上单个项目对齐方式
- 4. flex
- 5. flex-basis
- 6. flex-direction 主轴的方向（横向x轴）
- 7. flex-flow
- 8. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- 9. flex-shrink 收缩比率
- 10. flex-wrap
- 11. justify-content 定义了项目在主轴上的对齐方式
- 12. order 项目的排列顺序。数值越小，排列越靠前，默认为0。
属性
1. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
基本位置对齐
/*align-content不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end; /* 从终止点开始放置flex元素 */
默认对齐
align-content: normal;
基线对齐
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
分布式对齐
align-content: space-between; /* 均匀分布项目第一项与起始点齐平，最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目拉伸‘自动’-大小的项目以充满容器 */
溢出对齐
align-content: safe center;
align-content: unsafe center;
全局属性
align-content: inherit; /* 继承 */
align-content: initial; /* 初始值 */
align-content: unset; /* 未设置 */
2. aligin-items 侧轴对齐（y轴）
3. align-self 侧轴上单个项目对齐方式
4. flex
5. flex-basis
6. flex-direction 主轴的方向（横向x轴）
7. flex-flow
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap