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

Rachel Andrew

自 Chrome 123 起，您可以在區塊和表格版面配置上使用 CSS Box Alignment 的 align-content 屬性。這樣一來，您就不必建立彈性或格線版面配置，就能對齊區塊方向。不過，如果您在這些版面配置方法以外使用 align-content，可能需要更新 CSS，因為現在會生效。

Browser Support

• 123
• 123
• 125
• 17.4

彈性版面配置和格線版面配置中的 align-content

您可能已使用 align-content 對齊彈性項目或格線軌。在彈性版面配置中，align-content 屬性會用於彈性容器，以對齊交錯軸上的彈性項目。在下列範例中，這個值為 space-between，因此會將彈性容器中的可用空間分配給彈性資料列。

由於 Flex 容器在交錯軸有剩餘空間，align-content 屬性會將 Flex 項目列間隔開。

垂直置中項目

align-content 特別適合用於在容器內垂直置中項目。如要達成這個目標，請搭配使用 display: flex 和 align-content: center。這會導致項目成為彈性項目，其他預設彈性項目行為也會生效。在下列範例中，標題會使用 align-content: center 垂直置中，這會導致項目縮小以符合內容，因此您需要將 flex-grow: 1 套用至項目。

align-content 屬性會將標題在彈性容器中垂直置中。

有了適用於區塊版面配置的 align-content，您就能實現垂直對齊，不必為屬性建立彈性版面配置。由於項目仍為區塊項目，因此不需要其他屬性，唯一變更的是對齊方式。

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

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

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

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

align-content 屬性已在規格中定義多年，可處理區塊版面配置。由於這些環境以外的瀏覽器都不支援 align-content，因此系統未執行任何動作。不過，如果您已將該屬性新增至非彈性或格線容器的項目，從 Chrome 123 開始，該屬性就會生效。搜尋 CSS 是否使用 align-content，並使用 Beta 版測試網站和應用程式 (如果適用)。