Align-items vs. Align-content: Wann und wie werden sie im Rasterlayout verwendet?

Den Unterschied zwischen align-items und align-content im Rasterlayout verstehen

Obwohl Sie auf einen umfassenden Leitfaden zum Rasterlayout verwiesen haben, können Sie dies immer noch tun Sie haben Fragen zu den Unterschieden zwischen den Containereigenschaften „align-items“ und „align-content“. Zur Verdeutlichung schlüsseln wir die Terminologie auf:

• Rastercontainer: Der äußerste Container, der den Formatierungskontext des Rasters festlegt.
• Raster: Ein Gitter aus vertikalen und horizontalen Linien, das den Container in Kästchen (Gitterbereiche) unterteilt, die Gitterelemente enthalten.
• Gitterelemente: Kästchen, die im Inhaltsfluss des Gittercontainers platziert sind.

Um Rasterelemente innerhalb der Zellen auszurichten, verwenden Sie align-items und justify-items, während justify-content und align-content Richten Sie das gesamte Raster selbst innerhalb des Containers aus.

Lassen Sie uns nun mit einem häufigen Missverständnis aufräumen:

Behauptung: Die „-content“-Eigenschaften existieren, weil die Das Raster ist möglicherweise kleiner als sein Container, sodass Platz für die Ausrichtung bleibt.

Korrektur: Sowohl die Eigenschaften „-content“ als auch „-items“ gelten, wenn die Rastergröße kleiner als der Container ist. Allerdings wirken sich nur die „-content“-Eigenschaften auf die Ausrichtung des Rasters als Ganzes aus und ändern seine Position innerhalb des Containers.

In der Abbildung unten ist das Raster beispielsweise kleiner als der Container und lässt Platz Damit das Raster mit align-content: center vertikal zentriert und mit justify-content: end rechtsbündig ausgerichtet wird.

[Bild eines Rasterlayouts mit Leerzeichen drumherum]

Wenn dagegen die Rastergröße mit dem Container übereinstimmte, gäbe es keinen Platz zum Verteilen und align-content / justify-content würde dies tun haben keine Auswirkung.

Denken Sie daran, dass align-items und justify-items einzelne Rasterelemente innerhalb ihrer Rasterbereiche ausrichten, während align-content und justify-content richten das gesamte Raster innerhalb des Containers aus. Diese Unterscheidung ist entscheidend, wenn Sie das Layout und die Positionierung Ihres gitterbasierten Designs bearbeiten.

Das obige ist der detaillierte Inhalt vonAlign-items vs. Align-content: Wann und wie werden sie im Rasterlayout verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!