在CSS网格中，对齐自我、对齐项目和对齐内容之间有什么区别？

我真的很困惑。在查找在线资源和文档时，这些属性的大多数文档似乎都引用了Flex box，而不是grid。我不知道Flex box中等效属性的文档对网格有多适用

因此，我尝试了引用，它对它们的定义如下：

对齐项目-沿行轴对齐网格项目内的内容

对齐内容-此属性沿行轴对齐网格

自我调整-沿行轴对齐网格项目内的内容

但我还是不明白他们之间有什么区别。所以，我有三个问题要澄清

Flex box中的

justify items

属性是否与

对齐网格中的项目

属性？或者他们有什么不同？ （换句话说，我可以为网格重用Flex box文档吗）

内容、自我和项目（证明）是什么

（证明）内容、自我和项目有何不同

如有任何澄清，将不胜感激

编辑：因为每个人都在给我Flex box资源，所以我要问的是css网格，而不是Flex box。

回答您的问题： 1

正如reiallenramos提到的，“在flexbox中未实现“自我调整”和“调整项目”属性。这是由于flexbox的一维特性，并且沿轴可能有多个项目，因此无法证明单个项目的合理性。要在flexbox中沿主内联轴对齐项目，请使用“对齐内容”属性。“-

2-3

这张来自的屏幕截图很好地展示了它们的功能以及它们之间的差异。

很高兴知道： 有关更多信息和示例，我建议您查看：

还有一些启示：

---

好的，我想多亏了Michael_B，我才明白了这一点。我的困惑源于这样一个事实：有时不同的属性不会随机改变网格的布局

对齐内容允许您将网格放置在其网格容器内。这就是为什么如果网格容器与网格大小相同，“对齐内容”属性将无效的原因。（如果使用fr单位，则始终如此）。这也是为什么它可以具有以下值：周围空间、中间空间和均匀空间（除了开始、结束、居中和拉伸），它将分解网格并将网格项放置在网格容器中。这是网格容器的属性

对齐项目允许您为放置在网格网格项目中的内容设置默认位置（网格项目是网格中的一个框，如Michael_B的帖子中所定义）。这是网格容器的属性

justify self允许您覆盖单个单元格中内容的默认位置。这将覆盖justify items设置的位置。因此，如果在容器的所有子级上使用justify self，则在网格容器上设置justify items将无效。这是gri中内容的属性d项目

注意：如果将网格项设置为网格本身（换句话说，网格项中的内容是网格）然后，可以使用内部网格的网格容器上的“对齐自身”属性或“对齐内容”属性将其定位到外部网格项中，因为内部网格的网格容器是外部网格项的内容之一

正如您所料，所有这些也适用于align-*属性

---

如果我有任何错误，请纠正我

CSS网格中的

证明内容

、

证明项目

和

证明自我

之间的关键差异：

• justify content

  属性控制网格列的对齐方式。它在网格容器上设置。它不适用于或控制网格项的对齐方式

• justify items

  属性控制网格项的对齐方式。它在网格容器上设置

• justify self

  属性覆盖单个项目上的

  justify items

  。默认情况下，它在网格项目上设置并继承

  justify items

  的值

---

示例

这是一个2x3的网格

• 2列，每列100像素宽
• 3排，每排50像素高

容器是：

• 500px宽
• 250像素高

.container{
显示：网格；
网格模板列：100px 100px；
网格模板行：50px 50px 50px；
宽度：500px；
高度：250px；
网格模板区域：“一二”
“三四”
“五六”；
}
.box:n个子（1）{网格区域：1；}
.box:n个子（2）{网格区域：2；}
.box:n个子（3）{网格区域：3；}
.box:n个子（4）{网格区域：4；}
.box:n个子（5）{网格区域：5；}
.box:n子（6）{网格区域：6；}
/*非基本装饰风格*/
身体{
显示器：flex；
证明内容：中心；
}
.集装箱{
背景色：#ddd；
边框：1px实心#aaa；
}
.盒子{
背景颜色：浅绿色；
边框：1px纯色灰色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：1.2米；
}

1.
2.
3.
4.
5.
6.

自我证明用于水平对齐内容在其单元格中的位置

而align self用于垂直对齐内容在其单元格中的位置

下面是使用对齐项的结果