理解网格布局中“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 属性上。"
• "网格项也可以通过使用网格项上的align-self属性在块维度中对齐或网格容器上的align-items属性。“
• ”如果网格的外边缘与网格容器的内容边缘不对应，则网格轨道根据justify-content和align在内容框中对齐- 网格容器上的内容属性。"