多行对齐 (Align Content)
控制多行弹性容器中行的对齐方式。
alignContent 属性用于在交叉轴上有剩余空间时,对齐弹性容器内的行。此属性对单行弹性容器(即 flexWrap 为 NoWrap)无效。
取值
| 值 | 描述 |
|---|---|
Stretch | 默认值。行被拉伸以占据剩余空间。 |
FlexStart | 行紧凑排列在容器起始位置。 |
FlexEnd | 行紧凑排列在容器结束位置。 |
Center | 行紧凑排列在容器中间。 |
SpaceBetween | 行均匀分布;第一行在起始位置,最后一行在结束位置。 |
SpaceAround | 行均匀分布,行与行之间有相等的空间。 |
此属性也用于 Grid 行的整体对齐,以及 Display.Block / Display.FlowRoot 容器内内容的块轴对齐。例如,高 100 的块容器设置 AlignContent.Center,其高 20 的单个子元素会位于 y = 40。
还支持 Start、End、SpaceEvenly,以及 SafeStart、SafeEnd、SafeFlexStart、SafeFlexEnd、SafeCenter。安全值在内容无法容纳时回退到起始对齐。未设置时读回 undefined;表中的默认行为针对 Flex 布局。
示例
Loading Preview…