Align Content
CSS 的 align-content 属性用于设置交叉轴方向多个行或列的分布方式
语法
| Class | 属性 | 描述 |
|---|---|---|
| content-center | align-content: center; | 所有行朝向容器的中心填充 |
| content-start | align-content: flex-start; | 所有行从垂直轴起点开始填充 |
| content-end | align-content: flex-end; | 所有行从垂直轴末尾开始填充 |
| content-between | align-content: space-between; | 所有行在容器中平均分布 |
| content-around | align-content: space-around; | 所有行在容器中平均分布 |
| content-stretch | align-content: stretch; | 拉伸所有行来填满剩余空间 |
适用组件
| 基本视图容器 | 可滚动视图容器 | 列表组件 | list-view子组件 | swiper子组件 | 页面链接 |
|---|---|---|---|---|---|
| view | scroll-view | list-view | list-item | swiper-item | navigator |
示例
content-center
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
content-start
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
content-end
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
content-between
所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
content-around
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
content-stretch
拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。