align-content

CSS 的 align-content 属性用于设置交叉轴方向多个行或列的分布方式

语法

align-content: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>;

属性值

center 所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

flex-start 所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

flex-end 所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

space-between 所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

space-around 所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

stretch 拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

默认值

平台	默认值
app-uvue	stretch
web	normal

适用组件

• view
• scroll-view
• list-view
• list-item
• swiper-item
• navigator

兼容性

uni-app 兼容性

	安卓系统版本	安卓 uni-app	安卓 uni-app-x	iOS 系统版本	iOS uni-app	iOS uni-app-x
align-content	5.0	√	3.9+	9.0	√	-