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

Rachel Andrew

从 Chrome 123 开始，您可以在块布局和表格布局中使用 CSS 盒子对齐的 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 搭配使用。这会导致该项变为 flex 项，并且其他默认 flex 项行为也会生效。在以下示例中，标题使用 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 或 Grid 容器，则从 Chrome 123 开始，该属性将开始生效。搜索 CSS 中是否使用了 align-content，如果可能，请使用 Beta 版测试您的网站和应用。