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