Wie unterscheiden sich „justify-content', „justify-items' und „justify-self' im CSS-Rasterlayout?

Justify-self, justify-items und justify-content im CSS Grid verstehen

Ihre Verwirrung hinsichtlich der Ähnlichkeiten und Unterschiede zwischen diesen drei Eigenschaften ist verständlich, da sich die Dokumentation häufig auf Flex-Box und nicht auf Grid konzentriert. Zur Klarstellung:

1. Beziehung zwischen Flex-Box- und Grid-Eigenschaften

Die Eigenschaften justify-self und justify-items sind in Flex-Box nicht implementiert. Diese Unterscheidung ergibt sich aus der eindimensionalen Natur der Flex-Box, die es unmöglich macht, einen einzelnen Artikel zu rechtfertigen. Daher verlässt sich Flex-Box für die Ausrichtung entlang der Hauptachse auf die Eigenschaft „justify-content“.

2. Rollen von justify-self, justify-items und justify-content

• justify-content: Richtet das gesamte Raster entlang der Zeilenachse aus. Diese Eigenschaft steuert den Abstand zwischen Rasterelementen in horizontaler Richtung.
• justify-items: Richtet den Inhalt innerhalb einzelner Rasterelemente entlang der Zeilenachse aus. Es wirkt sich auf die Ausrichtung des Inhalts innerhalb der Rasterzellen aus.
• justify-self: Richtet das aktuelle Rasterelement innerhalb seiner übergeordneten Rasterzelle entlang der Zeilenachse aus. Diese Eigenschaft passt die Ausrichtung bestimmter Rasterelemente individuell an.

3. Hauptunterschiede

Die folgende visuelle Hilfe bietet eine klare Demonstration der Unterschiede zwischen diesen Eigenschaften:

[Bild des Rasterlayouts mit unterschiedlichen Ausrichtungen von Inhalten, Rasterelementen und dem Raster selbst]

Zusätzliche Ressourcen

Weitere Einblicke finden Sie im folgende Artikel:

• 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-produktion-ready-css-grid-layout/

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich „justify-content', „justify-items' und „justify-self' im CSS-Rasterlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!