align-content

介绍

在弹性布局中，align-content 定义了弹性行（flex line）在交叉轴上对齐方式。

在网格布局中，align-content 定义了如何对齐网格轨道到块轴。

使用示例

语法

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around; /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: stretch; /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

取值

`stretch`

默认值。如果元件沿交叉轴（网格布局是块轴）的组合尺寸小于对齐容器的尺寸，任何对应尺寸设置为 auto 的元件的尺寸都会等比例地增加其尺寸（而不是按比例增加），可仍然遵守由 max-height/max-width（或相应功能）施加的约束，以便沿交叉轴（网格布局是块轴）完全填充对齐容器的组合尺寸。

`start`

所有行从容器的起始边缘开始填充。

`end`

所有行从容器的结束边缘开始填充。

`flex-start`

同 start 表现一致。建议只在弹性布局上使用。

`flex-end`

同 end 表现一致。建议只在弹性布局上使用。

`center`

所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴（网格布局是块轴）起点边和第一行的距离相等于容器的交叉轴（网格布局是块轴）终点边和最后一行的距离。

`space-between`

所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴（网格布局是块轴）起点边和终点边分别与第一行和最后一行的边对齐。

`space-around`

所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴（网格布局是块轴）起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

形式定义

初始值	`stretch`
适用元素	弹性容器和网格容器
是否支持继承	否
是否支持动画	否

形式语法

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

与 Web 的区别

mdn: align-content

不支持 normal、baseline、first baseline、last baseline，默认值为 stretch。
不支持 space-evenly，后续会支持。

兼容性

LCD tables only load in the browser

#align-content

#介绍

#使用示例

#语法

#取值

#stretch

#start

#end

#flex-start

#flex-end

#center

#space-between

#space-around

#形式定义

#形式语法

#与 Web 的区别

#兼容性