理解網格佈局中“align-items”和“align-content”的區別

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

網格術語說明

• 網格容器：定義整體網格空間的父容器。
• Grid： 結構化的線條網格，將網格容器劃分為網格區域。
• 網格專案： 網格區域內包含流入內容的框。

對齊項目與對齊內容

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

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

回應作者的主張

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

• 當網格小於網格容器時，有可用空間。
• “justify-content”和“align-content”屬性可以利用此空間將網格居中對齊或以其他方式在容器內對齊。
• 相反，如果網格大小等於容器大小，則沒有空閒空間空間，並且這些對齊屬性無效。

清晰度插圖

[來自W3C 的插圖圖像，顯示比其容器小的網格，其中“ justify-content”和“align- content”對齊容器內的網格。 ]

摘自規範

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

• 「網格項可以透過使用justify-self 屬性在內聯維度中對齊在網格項或網格容器上的justify-items 屬性上。 self屬性在區塊維度中對齊或網格容器上的align-items屬性。和align在內容框中對齊- 網格容器上的內容屬性。