gpt4 book ai didi

css - CSS 网格中的 justify-self、justify-items 和 justify-content 之间有什么区别?

转载 作者:数据小太阳 更新时间:2023-10-29 09:14:40 27 4
gpt4 key购买 nike

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

所以,我尝试引用 https://css-tricks.com/snippets/css/complete-guide-grid/ ,定义如下:

justify-items - 沿行轴对齐网格元素内的内容

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

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

但是我还是不明白它们之间的区别是什么。所以,我有 3 个问题想要澄清。

  1. Flex-box中的justify-items属性是否与网格中的 justify-items 属性?或者他们有什么不同?(换句话说,我可以为 Grid 重用 Flex-box 文档吗)
  2. (justify-)content、self 和 items 有什么作用?
  3. (justify-)content、self 和 items 有何不同?

如有任何澄清,我们将不胜感激。

编辑:因为每个人都一直给我 Flex-box 资源,所以我问的是 css-grid,而不是 flex-box。

最佳答案

回答您的问题:

1

正如 reallenramos 提到的,“justify-self 和 justify-items 属性没有在 flexbox 中实现。这是由于 flexbox 的一维性质,并且沿轴可能有多个元素,因此不可能对齐单个元素。要沿 flexbox 中的主要内联轴对齐元素,您可以使用 justify-content 属性。” - MDN

2-3

此屏幕截图来自 W3很好地展示了他们的工作以及他们之间的差异。 enter image description here

好消息:

有关更多信息和示例,我建议您查看:

还有一些灵感:

关于css - CSS 网格中的 justify-self、justify-items 和 justify-content 之间有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48535585/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com