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中文網其他相關文章！