Verstehen der Unterscheidung zwischen „align-items“ und „align-content“ im Rasterlayout

Das Modul „Rasterlayout“ führt zwei Sätze von ein Eigenschaften, „justify/align-items“ und „justify/align-content“, die unterschiedliche Rollen bei der Ausrichtung von Rasterelementen und dem Raster selbst innerhalb eines Rasters spielen Container.

Klarstellung der Rasterterminologie

• Rastercontainer: Der übergeordnete Container, der den gesamten Rasterraum definiert.
• Gitter: Ein strukturiertes Gitter aus Linien, das den Gittercontainer in Gitter unterteilt Bereiche.
• Rasterelemente: Boxen, die eingehende Inhalte innerhalb der Rasterbereiche enthalten.

Align-items vs. Align-content

Die Eigenschaften „align-items“ und „align-content“ richten, wie der Name schon sagt, Rasterelemente und das Raster aus. jeweils. Konkret:

• justify-content und align-content richten die Rasterspuren innerhalb der Inhaltsbox des Rastercontainers aus.
• justify-self und justify-items richten Rasterelemente in der Inline-Dimension aus (horizontal nach). Standard).
• align-self und align-items richten Rasterelemente in der Blockdimension aus (standardmäßig vertikal).

Adressierung der Behauptung des Autors

Die Behauptung des Autors, dass die „-content“-Eigenschaften existieren, weil „manchmal die Gesamtmenge Die Größe Ihres Rasters ist möglicherweise kleiner als die Größe seines Rastercontainers. Die Eigenschaften „justify-content“ und „align-content“ können diesen Platz nutzen, um das Raster zentral oder anderweitig innerhalb des Containers auszurichten.

Wenn dagegen die Rastergröße der Containergröße entspricht, gibt es keinen freien Platz Leerzeichen, und diese Ausrichtungseigenschaften haben keine Auswirkung.
• Illustrationen zur Verdeutlichung

Auszug aus dem Spezifikation

"Rasterelemente können in der Inline-Dimension mithilfe der Eigenschaft justify-self ausgerichtet werden auf dem Rasterelement oder der justify-items-Eigenschaft im Rastercontainer item oder align-items-Eigenschaft für den Rastercontainer align-content-Eigenschaften im Rastercontainer.“