css - Grid Layout 中的 align-items 与 align-content 有什么区别？

Question

我已经阅读了 Grid 的完整指南，但仍然对两组容器属性之间的差异感到困惑，即“ justify/align-items”与“ justify/align-content”。

我的困惑围绕着作者提出的“ -content”集合存在的说法，因为

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

-content我认为这适用于两者，而不是“ ”集独有的。

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

Answer 1

让我们从澄清术语开始：

网格容器

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

网格

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

网格项目

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

这是来自W3C的插图：

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

、justify-self和属性对齐网格justify-items项。align-selfalign-items

---

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

我的困惑围绕着作者声称“ -content”集合在那里，因为：“有时网格的总大小可能小于其网格容器的大小”

好吧，您可以在插图中看到网格比网格容器小。

结果，有剩余空间，容器能够将该空间分配到垂直居中 ( align-content: center) 和右对齐 ( justify-content: end) 网格。

space-around额外的空间还可以允许网格用诸如和space-between之类的值隔开space-evenly。

但是，如果网格大小等于容器大小，则将没有可用空间，并且align-content/justify-content将不起作用。

---

以下是规范的更多内容：

10.3. 行轴对齐：justify-selfandjustify-items 属性

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

10.4. 列轴对齐：align-selfandalign-items 属性

align-self通过使用网格项上align-items的属性或网格容器上的属性，网格项也可以在块维度（垂直于内联维度）中对齐。

10.5。对齐网格：justify-content和align-content 属性

如果网格的外边缘不对应于网格容器的内容边缘（例如，如果没有列是 flex-sized），则网格轨道根据网格容器上的 justify-content和align-content属性在内容框中对齐。

^{（重点补充）}