理解網格佈局中「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中文網其他相關文章！
