Flexbox中align-content的作用是什么_多行元素交叉轴对齐

align-content用于控制多行flex容器中各行在交叉轴上的对齐方式，仅在换行且有剩余空间时生效；其常见取值包括flex-start、center、space-between等，与align-items不同的是，它作用于行与行之间而非单个子项。

align-content 的作用是控制 Flex 容器中多行伸缩项目（flex lines）在交叉轴上的对齐方式，但仅在容器内存在多行且在交叉轴方向上有剩余空间时才生效。

适用场景：多行伸缩容器

当 flex 容器的 flex-wrap: wrap 或 flex-wrap: wrap-reverse 导致子元素换行时，会形成多行。此时每行是一个“伸缩行”（flex line），而 align-content 决定这些行整体如何分布在交叉轴上。

• flex-start：所有行堆叠在交叉轴起点
• flex-end：所有行堆叠在交叉轴终点
• center：所有行居中对齐在交叉轴上
• space-between：行与行之间间距相等，首行在起点，末行在终点
• space-around：每行周围分配均匀空间（上下间距相等）
• space-evenly：包括边缘在内的所有间距都相等
• stretch（默认值）：拉伸每一行以填满容器（在无固定尺寸时）

与 align-items 的区别

align-items 控制的是单行中每个项目在交叉轴上的对齐方式，无论是否换行都会生效；而 align-content 只有在多行情况下才有意义。如果只有一行，align-content 无效。

Hugging Face

Hugging Face AI开源社区

135

查看详情

实际示例

假设一个垂直方向有足够高度的容器设置了 flex-wrap: wrap 和 align-content: space-between，那么换行后的每一行会在容器的交叉轴（通常是垂直方向）上均匀分布，第一行贴顶部，最后一行贴底部，中间空隙平均分配。

基本上就这些 —— align-content 是处理多行布局时，行与行之间如何排列的关键属性。

以上就是Flexbox中align-content的作用是什么_多行元素交叉轴对齐的详细内容，更多请关注php中文网其它相关文章！