所以,我尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/,它定义如下:
justify-items – 沿着行轴对齐网格项内的内容
justify-content – 此属性沿着行轴对齐网格
justify-self – 沿着行轴对齐网格项内的内容
但我仍然不明白它们之间的区别是什么.所以,我有3个问题要澄清.
> Flex-box中的justify-items属性是否与
Grid中的justify-items属性?或者它们有什么不同?
(换句话说,我可以重用Grid的Flex-box文档)
>(证明 – )内容,自我和项目有什么作用?
>如何(证明 – )内容,自我和项目有所不同?
任何澄清将不胜感激.
编辑:由于每个人都不断给我Flex-box资源,我问的是css-grid,而不是flex-box.
回答你的问题:1
正如reiallenramos所提到的那样,“自我辩解和对齐物品属性并没有在flexbox中实现.这是由于flexbox的一维特性,沿着轴可能有多个项目,因此无法证明单个item.要在flexbox中沿主要内联轴对齐项目,请使用justify-content属性.“ – MDN
2-3
从W3拍摄的这个屏幕非常出色地展示了它们的作用以及它们之间的差异.
好知道:
有关更多信息和示例,我建议您查看:
> 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/