在网格布局中对齐项目与对齐内容之间有什么区别？

Question

我已经阅读了网格的完整指南，但仍然对两组容器属性之间的差异感到困惑，即“对齐/对齐项””与“对齐/对齐内容””。

我的困惑围绕着作者的说法，即“-内容”集在那里是因为

有时网格的总大小可能小于网格容器的大小

我认为这两种情况都适用，而不仅仅是“-content”集合。

有人能解释一下吗？最好使用一些图形说明作为示例。

Answer 1

让我们从澄清术语开始：

网格容器是网格和网格项的整体容器。它建立网格格式化上下文（相对于另一个格式化上下文，如flex或block）。

网格是一组交叉的垂直和水平线，将网格容器的空间划分为网格区域，网格区域是包含网格项的盒子。

网格项是网格容器中的框，表示流内容（即，不是绝对定位的内容）。

以下是来自W3C的一个示例：

justify content和align content属性对齐网格。

align self、align items、align self和align items属性将网格项对齐。

关于你问题中描述的问题：

我的困惑围绕着作者所说的“-content”集合存在是因为：“有时网格的总大小可能小于其网格容器的大小”

在图中可以看到网格比网格容器小。

因此，还有剩余空间，容器可以将该空间分布到网格的垂直中心（对齐内容：中心）和右对齐（对齐内容：结束）。

额外的空间还可以允许网格以值隔开，例如周围的空间，之间的空间和均匀的空间。

但是，如果网格大小等于容器大小，则没有可用空间，align content/justify content将无效。

以下是规范中的更多内容：

10.3. 行轴对齐：justify self和justify items属性

通过使用网格项上的justify self属性或网格容器上的justify items属性，可以在内联维度中对齐网格项。

10.4. 列轴对齐：align self和align items属性

网格项也可以在块维度（垂直于内联维度）中对齐，方法是使用网格项上的amize-Self属性或网格容器上的amize-Item属性。

10.5. 对齐网格：对齐内容和对齐内容属性

如果网格的外边缘与网格容器的内容边缘不对应（例如，如果没有列是弹性大小的），则网格轨迹将根据网格容器上的对齐内容和对齐内容属性在内容框内对齐。

^{（增加强调）}