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

我已经通读了，但仍然对两组容器属性之间的差异感到困惑，即“

对齐/对齐项目”

”与“

对齐/对齐内容”

”

我的困惑围绕着作者所说的“

-content

”集合之所以存在是因为

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

我认为这两种情况都适用，而不仅仅是“

-content

”集合

---

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

让我们从澄清术语开始：

网格容器 网格容器是网格和网格项的总体容器。它建立网格格式上下文（与另一个格式上下文（如flex或block）相反）

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

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

以下是来自以下方面的说明：

对齐内容

和

对齐内容

属性对齐网格

justify self

，

justify items

，

align self

和

align items

属性对齐网格项

---

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

我的困惑围绕着作者所说的“

-content

”集合存在是因为：“有时网格的总大小可能小于其网格容器的大小”

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

因此，还有剩余空间，容器可以将该空间分布到网格的垂直中心（

对齐内容：中心

）和右对齐（

对齐内容：结束

）

额外的空间还可以允许网格以值隔开，例如

周围的空间

，

之间的空间

和

均匀的空间

但是，如果网格大小等于容器大小，则没有可用空间，

align content

/

justify content

将无效

---

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

网格项可以使用 网格项上的

justify self

属性或

justify items

属性 在网格容器上

网格项也可以在块标注中对齐（垂直） 使用上的

align self

属性 网格项或网格容器上的

align items

属性

如果网格的外边缘与网格容器的 内容边缘（例如，如果没有灵活大小的列），网格 曲目在内容框内根据

在网格上对齐内容

和

对齐内容

属性 容器

（增加重点）

---

你好我已经找到了这个答案。我可以问一个关于这个的问题吗？因此，当您使用justify/align items和self时，是否正在更改网格项内的内容？例如，数据将如何显示在网格项中？我仍然感到困惑@@@TreeNguyen，如果使用

对齐项目

/

对齐项目

（在容器上）和

对齐自我

/

对齐自我

（在项目上（覆盖容器上的设置）），您将在网格容器内对齐网格项目。要对齐网格项目内的内容，可以将每个项目设置为flex容器，并将flex属性应用于内容。使用

align content

和

justify content

可以对齐容器额外空间内的网格行和列（如果有）。这是一个您可以使用的演示：