align-content

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

Syntax

align-content: center | flex-start | flex-end | space-between | space-around | stretch;

Values

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

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

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

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

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

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

default

Platform	default
app-uvue	stretch
web	normal

Applicable components

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

Compatibility

uni-app compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
align-content	5.0	√	3.9+	9.0	√	-

See also

• Related Bug