CSS 網格佈局中的「align-items」和「align-content」有什麼區別？

理解網格佈局中「align-items」和「align-content」的區別

網格佈局模組引入了兩組屬性「justify/align-items」和「justify/align-content」在對齊網格容器內的網格項目和網格本身方面發揮著不同的作用。

網格術語說明

• 網格容器： 定義整體網格空間的父容器。
• 網格： 劃分網格的結構化線條網格。將網格容器放入網格區域。
• 網格項目： 包含網格區域內的流入內容的框。

對齊項目與對齊項目Align-content

「align-items」和「align-content」屬性，顧名思義，分別對齊網格項和網格。具體來說：

• justify-content 和 align-content 對齊網格容器內容框中的網格軌道。
• justify-self 和 justify-items 在內聯維度中對齊網格項目（預設水平）。
• align-self 和 align-items 在區塊維度中對齊網格項目（預設為垂直）。

解決作者的聲明

作者聲稱「 -content」屬性的存在是因為「有時網格的總大小可能小於其網格容器的大小」突出顯示以下內容：

• 當網格小於網格容器時，有可用空間。
• 「justify-content」和「align-content」屬性可以利用此空間在容器內居中或以其他方式對齊網格。
• 相反，如果網格size 等於容器大小，沒有可用空間，且這些對齊屬性不起作用。

清晰插圖

[來自W3C 的插圖圖片顯示小於其容器的網格，並使用“justify-content”和“align-content”對齊容器內的網格。 ]

摘自規範

為了清楚起見，提供了 CSS 網格佈局規範的相關摘錄：

• 「可以透過使用網格項目上的justify-self 屬性或網格容器上的justify-items 屬性來在內聯維度中對齊網格項。」
• 「網格項目也可以透過使用網格項目上的align-self屬性或網格容器上的align-items屬性在區塊維度中對齊。邊緣不對應，則網格軌道根據網格容器上的justify-content 和align-content 屬性在內容框中對齊。

以上是CSS 網格佈局中的「align-items」和「align-content」有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！