支持在块布局和表格布局中使用 align-content

Rachel Andrew

从 Chrome 123 开始，您可以在块和表格布局中使用 CSS Box Alignment 中的 align-content 属性。这样一来，无需创建 Flex 或网格布局，即可实现块方向对齐。不过，如果您在这些布局方法之外使用了 align-content，则可能需要更新 CSS，因为该属性现在会生效。

Browser Support

• 123
• 123
• 125
• 17.4

在 flex 和网格布局中align-content

您可能已经使用过 align-content 来对齐 flex 内容或网格轨道。在 Flex 布局中，align-content 属性用于 Flex 容器，以使 Flex 内容沿交叉轴对齐。在以下示例中，它的值为 space-between，因此它会在 flex 容器中将可用空间分配给 flex 行。

由于 flex 容器在交叉轴上具有剩余空间，因此 align-content 属性会使 flex 内容的行之间留出间距。

垂直居中放置项目

align-content 在将项目垂直居中放置在容器中时特别有用。为此，请将 display: flex 与 align-content: center 搭配使用。这会导致相应元素成为弹性项目，并且其他默认弹性项目行为也会生效。在以下示例中，标题通过 align-content: center 垂直居中，这会导致项缩小以适应内容，因此您需要将 flex-grow: 1 应用于该项。

align-content 属性可使标题在 flex 容器内垂直居中。

有了适用于块布局的 align-content，您将能够实现垂直对齐，而无需创建 flex 布局即可使该属性正常运行。由于该项仍为块级项，因此无需添加其他属性，只需更改对齐方式即可。

align-content 属性用于在块容器内垂直居中放置标题（需要 Chrome 123 或 Safari 17.4 或更高版本）。

测试在块布局中对 align-content 的支持

很遗憾，无法在块布局中测试 align-content 的支持情况。由于 flex 和网格布局已长时间支持 align-content，因此使用 @supports 的功能查询将始终返回 true。这与 flexbox 中 gap 属性的情况相同。CSS 工作组正在探索针对此类部分实现情况的解决方案。

检查网站是否存在意外的对齐方式

align-content 属性已在规范中定义多年，用于处理块布局。由于没有浏览器在这些上下文之外支持 align-content，因此它没有执行任何操作。不过，如果您已将该属性添加到非 flex 或网格容器中，那么从 Chrome 123 开始，该属性将开始生效。在 CSS 中搜索 align-content 的使用情况，如果您的网站和应用可能存在这种情况，请使用 Beta 版进行测试。