当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
我真的很困惑.在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是grid.我不知道Flex-box中等效属性的文档对网格的适用性如何. 所以,我尝试引用https://css-tricks.co
我真的很困惑.在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是grid.我不知道Flex-box中等效属性的文档对网格的适用性如何.

所以,我尝试引用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/

网友评论