css - 网格布局中的 align-items 与 align-content 有什么区别？

Question

我已通读 A complete guide to Grid ，但仍然对两组容器属性之间的差异感到困惑，即“justify/align-items”与“justify/align-content”。

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

Sometimes the total size of your grid might be less than the size of its grid container

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

谁能帮忙解释一下？最好使用一些图形说明作为示例。

Answer 1

让我们从澄清术语开始:

网格容器

网格容器是网格和网格项的整体容器。它建立了网格格式化上下文(相对于其他格式化上下文，例如 flex 或 block)。

网格

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

网格元素

网格项是网格容器中的框，表示流入内容(即，未绝对定位的内容)。

这是来自 W3C 的插图:

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

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

---

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

My confusion revolves around the claim made by the author that the "-content" set are there because: "Sometimes the total size of your grid might be less than the size of its grid container"

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

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

额外的空间还可以让网格以 space-around、space-between 和 space-evenly 等值间隔开>.

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

---

这里是规范的更多内容:

10.3. Row-axis Alignment: the justify-self and justify-items properties

Grid items can be aligned in the inline dimension by using the justify-self property on the grid item or justify-items property on the grid container.

10.4. Column-axis Alignment: the align-self and align-items properties

Grid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the align-self property on the grid item or align-items property on the grid container.

10.5. Aligning the Grid: the justify-content and align-content properties

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

^{(emphasis added)}