了解 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中文网其他相关文章!