Wie unterscheiden sich „align-items' und „align-content' im CSS-Rasterlayout?

Verstehen der Unterschiede zwischen Align-Items und Align-Content im CSS-Rasterlayout

In der umfassenden Anleitung zum Rasterlayout werden die Konzepte von „justify/align-items“ erläutert „ und „justify/align-content“-Eigenschaften werden eingeführt. Während der Autor vorschlägt, dass „-content“-Eigenschaften verwendet werden, wenn die Rastergröße kleiner als der Container ist, gilt dieses Konzept für beide Eigenschaftensätze.

Definieren der Komponenten eines Rastersystems

• Rastercontainer: Das übergeordnete Element, das das Raster und seine Elemente umschließt und den Formatierungskontext festlegt.
• Raster: Ein Raster aus sich überschneidenden Linien, das Bereiche bildet damit Rasterelemente belegt werden.
• Rasterelemente:Elemente, die innerhalb der Rasterbereiche platziert werden.

Ausrichtung von Raster und Rasterelementen

Die Die Eigenschaften justify-content und align-content steuern die Ausrichtung des Rasters innerhalb seines Containers, während justify-self, justify-items, align-self und align-items die Ausrichtung einzelner Rasterelemente steuern.

Veranschaulichung das Konzept

Stellen Sie sich ein Raster vor, das kleiner als sein Container ist, wie unten gezeigt:

[Bild des Rasterlayouts mit zusätzlichem Platz im Container]

In diesem Szenario ist das Die Eigenschaften „justify-content“ und „align-content“ können verwendet werden, um den zusätzlichen Platz zu verteilen. Beispielsweise richtet justify-content: end das Raster nach rechts aus, während align-content: center es vertikal zentriert.

Über Größenüberlegungen hinaus

Auch wenn die Rastergröße mit der Containergröße übereinstimmt, richten Sie sie aus -content- und justify-content-Eigenschaften bleiben funktionsfähig. Sie ermöglichen Abstandsoptionen wie „space-around“, „space-between“ und „space-evently“, die den freien Raum zwischen den Rasterspuren verteilen.

Highlights der Spezifikation

Die CSS-Grid-Layout-Spezifikation verdeutlicht deren Rollen Eigenschaften:

• 10.3: Zeilenachsenausrichtung: justify-self und justify-items richten Rasterelemente horizontal aus.
• 10.4: Spaltenachse Ausrichtung: align-self und align-items richten Rasterelemente vertikal aus.
• 10.5: Ausrichten des Rasters: justify-content und align-content richten das Raster innerhalb des Containers aus, wenn dies der Fall ist Die Außenkanten des Rasters stimmen nicht mit den Inhaltskanten des Containers überein.

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