1,flex-direction方向 2,flex-wrap换行 3,justify-content元素排列 4,align-items元素在交叉轴上对齐(以元素为基准) 5,align-content 弹性容器内元素多根轴线的对齐方式(以弹性容器为基准) 6,order元素排序 7,flex-shrink放大比例 8,flex-shrink缩小比例

align-content 弹性容器内元素多根轴线的对齐方式(以弹性容器为基准)

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
需要配合flex-wrap: wrap;换行使用

1,align-content: flex-start;与交叉轴的起点对齐。
1 2 3 1 2 3 1 2 3
2,align-content: flex-end;与交叉轴的终点对齐。
1 2 3 1 2 3 1 2 3
3,align-content: center;与交叉轴的中点对齐。
1 2 3 1 2 3 1 2 3
4,align-content: space-between;与交叉轴两端对齐,轴线之间的间隔平均分布。
1 2 3 1 2 3 1 2 3
5,align-content: space-around;每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
1 2 3 1 2 3 1 2 3
6,align-content: stretch(默认值);轴线占满整个交叉轴。
1 2 3 1 2 3 1 2 3