CSS网格中的justify-self，justify-items和justify-content之间的区别 [英] The difference between justify-self, justify-items and justify-content in CSS Grid

问题描述

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

I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid.

因此，我尝试引用 https://css-tricks. com/snippets/css/complete-guide-grid/，其定义如下:

So, I've tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows:

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

justify-items - Aligns the content inside a grid item along the row axis

正当内容-此属性可使网格沿行轴对齐

justify-content - This property aligns the grid along the row axis

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

justify-self - Aligns the content inside a grid item along the row axis

但是我仍然不了解它们之间的区别.因此，我有3个问题需要澄清.

But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.

1. Flex-box中的justify-items属性是否与 网格中的justify-items属性?还是它们有所不同? (换句话说，我可以将Flex-box文档重新用于Grid)
2. (合理化)内容，自我和物品做什么?
3. (正当化)内容，自我和物品有何不同?

1. Is the justify-items property in Flex-box the same as the justify-items property in Grid? or are they different somehow? (In other words, can I reuse Flex-box documentation for Grid)
2. What do (justify-)content, self and items do?
3. How are (justify-)content, self and items different?

任何澄清将不胜感激.

编辑:由于每个人都在不断给我Flex-box资源，所以我要问的是css-grid，而不是flex-box.

Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.

推荐答案

要回答您的问题:

1

正如reiallenramos所说，在flexbox中未实现justify-self和justify-items属性.这是由于flexbox的一维特性，并且沿轴可能有多个项目，因此无法对齐单个项目.要在flexbox中沿内联主轴对齐项目，请使用justify-content属性." - MDN

As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN

2-3

此屏幕截图来自 W3 表现出色他们做什么，以及他们之间的差异.

This screen shot from W3 does an excellent job of showing what they do and the differences between them.

有关更多信息和示例，我建议您检查一下:

For more information and example, I would suggest you check out:

• https://developer.mozilla.org/zh- US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

还有一些启发:

• https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

这篇关于CSS网格中的justify-self，justify-items和justify-content之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！