align-content 多行交叉轴对齐属性

最后更新：2026-09-13

align-content align-content 多行交叉轴对齐属性

align-content 属性用于设置弹性容器内多行项目在交叉轴上的对齐方式和间距分配，仅在项目换行（flex-wrap: wrap）产生多行时生效。它类似于 justify-content，但作用在交叉轴上且针对行与行之间的空间。单行情况下该属性不产生效果，此时应使用 align-items。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

align-content: normal | stretch | start | end | flex-start | flex-end | center | space-between | space-around | space-evenly | baseline;

⚙️ 取值

值	类型	描述
`normal \| stretch \| flex-start \| flex-end \| center \| space-between \| space-around`	关键字	多行交叉轴对齐

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
align-content	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

注意： align-content 仅在多行弹性布局中生效。如果项目没有换行（单行），该属性不会产生任何效果，此时应使用 align-items 控制交叉轴对齐。

提示： align-content 和 align-items 可以同时使用：align-content 控制行与行之间的对齐，align-items 控制每行内项目在交叉轴上的对齐。

❓ 常见问题

Qalign-content 和 align-items 有什么区别？

Aalign-items 控制单行内各子项在交叉轴上的对齐；align-content 控制多行作为一个整体在交叉轴上的分布。单行时 align-content 无效，多行时 align-items 管每行内部、align-content 管行与行之间的空间分配。两者可同时设置，分别作用于不同层面。

Q为什么设置了 align-content 但没有效果？

A可能原因：子项没有换行（单行布局）、容器没有明确高度、flex-wrap 仍为 nowrap。align-content 只在 flex-wrap: wrap 产生多行、且容器在交叉轴方向有剩余空间时才生效。检查 flex-wrap 与容器高度即可定位。

Q如何让换行后的多行 flex 子项整体垂直居中？

A分两层处理：容器上设置 align-content: center 让多行整体在交叉轴（垂直方向）居中分布；若同一行内子项高度不齐，再配合 align-items: center 让行内子项垂直居中。前提是容器有确定高度且 flex-wrap: wrap 产生多行，否则 align-content 不会生效。