CSS网格中的justify-self，justify-items和justify-content有什么区别? [英] What is difference between justify-self, justify-items and justify-content in CSS grid?
问题描述
我真的很困惑.在寻找在线资源和文档时，这些属性的大多数文档似乎都引用了Flex-box，而不是网格.而且我不知道Flex-box中等效属性的文档对网格的适用性.
因此，我尝试引用
必知:
有关更多信息和示例，我建议您检查一下:
- 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/
还有一些启发:
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.
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 - Aligns the content inside a grid item along the row axis
But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.
- Is the
justify-itemsproperty in Flex-box the same as thejustify-itemsproperty in Grid? or are they different somehow? (In other words, can I reuse Flex-box documentation for Grid) - What do (justify-)content, self and items do?
- How are (justify-)content, self and items different?
Any clarification would be greatly appreciated.
Edit: Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.
To answer your questions:
1
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
This screen shot from W3 does an excellent job of showing what they do and the differences between them.
Good To Knows:
For more information and example, I would suggest you check out:
- 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/
And for some inspiration:
这篇关于CSS网格中的justify-self，justify-items和justify-content有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
