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

Question

我已阅读A complete guide to Grid，但仍然混淆了两组容器属性之间的差异，即“justify/align-content”与“-content”。

我的混淆围绕着作者声称“-content”集合存在，因为

  

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

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

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

Answer 1

让我们从澄清术语开始：

网格容器

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

网格

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

网格项

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

以下是W3C：

的插图

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

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

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

  

我的困惑围绕着作者声称＆＃34; -content＆＃34;设置是因为：＆＃34;有时网格的总大小可能小于其网格容器的大小＆＃34;

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

因此，剩余空间，容器能够将此空间分布到垂直居中（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

     

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

     

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

     

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

     

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

     

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

     

^{（强调补充）}