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

Rachel Andrew

在 Chrome 123 中，您可以在區塊和表格版面配置上使用 CSS Box 對齊的 align-content 屬性。這樣就能讓區塊方向對齊，無需建立彈性或格狀版面配置。但是，如果您已在這些版面配置方法之外使用 align-content，可能需要更新 CSS，因為這項功能現在就會生效。

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

您可能已使用 align-content 對齊彈性項目或格線軌道。在彈性版面配置中，Flex 容器會使用 align-content 屬性，讓交叉軸上的彈性項目對齊。在以下範例中，其值為 space-between，因此會在彈性容器之間分配可用空間。

將項目垂直置中

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

針對區塊版面配置，您可以使用 align-content 來實現垂直對齊，而不需要為屬性建立彈性版面配置。由於項目仍是區塊項目，因此不需要其他屬性，唯一的更動是對齊方式。

測試在區塊版面配置中對 align-content 的支援

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

檢查網站是否與預期不符

在規格中，align-content 屬性已定義好多年，以便用於區塊版面配置。由於上述環境以外的瀏覽器都不支援 align-content，因此它沒有任何作用。不過，如果您已將這項屬性新增至非 Flex 或格線容器，則自 Chrome 123 版起，該屬性就會生效。請搜尋 CSS 來使用 align-content，並透過 Beta 版測試網站和應用程式。