CSS Grid中的justify-self，justify-items和justify-content之间的区别

时间：2018-01-31 06:11:56

标签： css css3 css-grid

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

所以，我已经尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/，它定义如下：

justify-items - 沿着行轴对齐网格项内的内容

justify-content - 此属性沿着行轴对齐网格

justify-self - 沿着行轴对齐网格项内的内容

但我仍然不明白它们之间的区别是什么。所以，我有3个问题需要澄清。

  1. Flex框中的justify-items属性是否与 网格中的justify-items属性？或者它们有什么不同？ （换句话说，我可以重用Grid的Flex-box文档）
  2. （证明 - ）内容，自我和项目有什么作用？
  3. （证明 - ）内容，自我和项目有何不同？

    4. 非常感谢任何澄清。

    编辑：由于每个人都在不断向我提供Flex-box资源，我问的是css-grid，而不是flex-box。

4 个答案:

答案 0 :(得分：32)

回答你的问题：

<强> 1

正如reiallenramos所提到的那样，“在flexbox中没有实现自我和自我物品属性。这是由于flexbox的一维特性，沿着轴可能有多个项目，因此无法证明单个项目是合理的。要在flexbox中沿主要内联轴对齐项目，请使用justify-content属性。“ - MDN

<强> 2-3

来自W3的屏幕截图非常出色地展示了他们的所作所为以及他们之间的差异。 enter image description here

好知道：

有关更多信息和示例，我建议您查看：

为了一些灵感：

答案 1 :(得分：0)

好吧，我想我是想通过Michael_B来解决的。我的困惑来自这样一个事实，即有时不同的属性会随机改变网格的布局。

justify-content 允许您将网格放置在其网格容器中。这就是为什么如果网格容器与网格的大小相同，则justify-content属性将不起作用。 （如果使用fr单位，情况总是如此）。这也是它可以具有以下值的原因：空间，空间和空间均匀（除了开始，结束，居中和拉伸），这将分解网格并将网格项放置在网格容器中。这是网格容器的属性。

justify-items 允许您为放置在网格网格项中的内容设置默认位置（网格项是网格中的一个框，如Michael_B＆＃39;中定义的那样。的帖子）。这是网格容器的属性。

justify-self 允许您覆盖单个单元格中内容的默认位置。这将覆盖由justify-items设置的位置。因此，如果对容器的所有子项使用justify-self，则在网格容器上设置justify-items将不起作用。这是网格项中内容的属性。

注意：如果将网格项本身设为网格，（换句话说，网格项内的内容是网格），则可以使用justify-self属性或者将其置于外部网格项中。内网格的网格容器中的justify-content属性，因为内网格的网格容器是外网格的网格项目内容之一。

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

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

答案 2 :(得分：0)

Justify-self 用于将内容在其单元格水平中的位置对齐。

虽然 align-self 用于将内容在其单元格中的位置对齐垂直。

以下是使用justify-self: start;

对齐项目的结果

THE RESULT FOR THE CODE justify-self: start;

答案 3 :(得分：-1)

justify-content 用于当网格项的总大小小于网格容器时，沿网格容器的行/内联轴定位整个网格。

justify-items 用于网格容器，用于通过为所有子框设置默认的 justify-self 属性来确定网格项如何沿行展开。

justify-self 用于设置单个网格项如何沿行/内联轴定位自身。网格项默认继承容器上 justify-items 属性的值，因此如果设置了 justify-self 值，它将覆盖继承的 justify-items 值。

来源：Codecademy CSS Grid cheatsheet

相关问题
最新问题