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

解开谜团：CSS 网格中的 justify-self、justify-items 和 justify-content

尽管它们的名字很熟悉，但 justify-self、justify-items、 CSS Grid 中的 justify-content 和 justify-content 与其 Flexbox 对应项有很大不同。让我们探讨它们在网格布局中的角色和区别。

定义它们的功能

• justify-content: 控制网格列沿行轴的分布。
• justify-items: 对齐各个网格内的内容沿行轴的项目。
• justify-self: 在其父网格行内沿行轴对齐各个网格项目。

理解差异

虽然这些属性与 Flexbox 对应属性有一些相似之处，但它们在网格中具有关键区别

• Flexbox 和 Grid 差异： 与 Flexbox 不同，CSS Grid 不实现 justify-self 和 justify-items。这源于 Flexbox 的一维性质，其中多个项目可以沿轴存在。
• 项目与项目内容： justify-items 影响网格项目中内容的放置，而 justify -self 控制网格项本身在各自行中的位置。

视觉描述

请参阅所附屏幕截图，了解每个属性效果的直观表示。

其他资源

如需进一步指导和灵感，请考虑以下资源：

• MDN： 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-product- read-css-grid-layout/
• CSS 网格挑战： https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

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