支援區塊和資料表版面配置中對齊內容

Rachel Andrew

自 Chrome 123 起，您可以在區塊和表格版面配置中使用 CSS 邊框對齊的 align-content 屬性。這樣一來，您就能讓區塊方向對齊，而無需建立 Flexbox 或 GridLayout。不過，如果您已在這些版面配置方法之外使用 align-content，則可能需要更新 CSS，因為 align-content 會在現在生效。

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，您就能達成垂直對齊，而不需要為資源建立彈性版面配置。由於項目仍為區塊項目，因此不需要額外屬性，唯一的變更是對齊方式。

align-content 屬性可將標題垂直置中，顯示在區塊容器中 (需要 Chrome 123 或 Safari 17.4 以上版本)。

測試區塊版面配置是否支援 align-content

很抱歉，您無法測試區塊版面配置是否支援 align-content。由於彈性和格線版面配置已長久支援 align-content，因此使用 @supports 的功能查詢一律會傳回 true。這與 flexbox 中的 gap 屬性發生相同情況。CSS 工作小組正在探索這類部分導入作業的解決方案。

檢查網站是否有非預期的對齊

align-content 屬性已在規格說明書中定義多年，用於處理區塊版面配置。由於沒有瀏覽器支援這些情境以外的 align-content，因此不會執行任何操作。不過，如果您將屬性新增至非 Flex 或 GridLayout 容器，則該屬性會從 Chrome 123 開始生效。請搜尋 CSS 是否使用 align-content，如果是的話，請使用 Beta 版測試網站和應用程式。