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

Question

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

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

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

我认为这不仅适用于“ -content”集，还适用于两者。

有人可以帮忙解释一下吗？优选地，使用一些图示说明作为示例。

Answer 1

让我们开始澄清术语：

网格容器

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

格网

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

网格项

网格项是网格容器中代表流入内容（即，未完全定位的内容）的框。

这是W3C的插图：

该justify-content和align-content性能对齐网格。

的justify-self，justify-items，align-self和align-items性能对齐网格项目。

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

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

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

结果，剩下了空间，容器可以将该空间分配到垂直居中（align-content: center）和右对齐（justify-content: end）网格。

多余的空间还可以使网格以space-around，space-between和等值隔开space-evenly。

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

这是规范的更多内容：

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

电网项目可以在维联，通过使用对齐 justify-self网格上的物品或财产justify-items网格容器上属性。

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

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

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

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

^{（添加了重点）}