CSS 网格布局中的'justify-content”、'justify-items”和'justify-self”有何不同？

了解 CSS Grid 中的 justify-self、justify-items 和 justify-content

您对这些之间的异同感到困惑三个属性是可以理解的，因为文档通常关注 Flex-box 而不是 Grid。澄清一下：

1。 Flex-box 和 Grid 属性之间的关系

Flex-box 中未实现 justify-self 和 justify-items 属性。这种区别源于 Flex-box 的一维性质，这使得证明单个项目的合理性变得不可能。因此，Flex-box 依赖 justify-content 属性来沿主轴对齐。

2. justify-self、justify-items 和 justify-content

• justify-content 的作用：沿行轴对齐整个网格。此属性控制水平方向上网格项目之间的间距。
• justify-items：沿行轴对齐各个网格项目内的内容。它影响网格单元内内容的对齐方式。
• justify-self：沿行轴对齐其父网格单元内的当前网格项。此属性单独调整特定网格项的对齐方式。

3.主要区别

以下视觉辅助清楚地演示了这些属性之间的区别：

[内容、网格项和网格的不同对齐方式的网格布局图像本身]

其他资源

有关更多见解，请参阅到以下文章：

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

以上是CSS 网格布局中的'justify-content”、'justify-items”和'justify-self”有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！