align-content

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

uni-app x 兼容性

Android	iOS	web
3.9	4.11	4.0

语法

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

align-content 的属性值

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

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

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

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

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

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

默认值

平台	默认值
uvue	stretch

注意：W3C 默认值为：normal

按W3C规范，normal值在弹性布局（display: flex）中行为与stretch一致，详情参考：CSS Box Alignment。

适用组件

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

兼容性

align-content 的属性值兼容性

	Android	iOS	web
center	3.9	4.11	4.0
flex-start	3.9	4.11	4.0
flex-end	3.9	4.11	4.0
space-between	3.9	4.11	4.0
space-around	3.9	4.11	4.0
stretch	3.9	4.11	4.0

浏览器兼容性

	Chrome	Edge	Firefox	Opera	Safari	IE
align-content	√（ 29 ）	√（ 12 ）	√（ 28 ）	√（ 16 ）	√（ 9 ）	√（ 11 ）

参见

• MDN Reference
• 相关 Bug