Was ist der Unterschied zwischen „align-items“ und „align-content“ im CSS-Rasterlayout?

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 Rastercontainers spielen.

Klärung der Rasterterminologie

• Rastercontainer: Der übergeordnete Container, der den gesamten Rasterraum definiert.
• Raster: Ein strukturiertes Raster aus Linien, das die unterteilt Rastercontainer in Rasterbereiche.
• 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 bzw. das Raster aus. 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 (standardmäßig horizontal).
• align-self und align-items Rasterelemente in der Blockdimension ausrichten (standardmäßig vertikal).

Ansprache der Behauptung des Autors

Die Behauptung des Autors, dass die „ -content“-Eigenschaften existieren, weil „manchmal die Gesamtgröße Ihres Rasters kleiner sein könnte als die Größe seines Rastercontainers“. freier Speicherplatz verfügbar.

Die Eigenschaften „justify-content“ und „align-content“ können diesen Platz nutzen, um das Raster zentral oder anderweitig innerhalb des Containers auszurichten.
• Im Gegensatz dazu, wenn das Raster Die Größe entspricht der Containergröße, es gibt keinen freien Speicherplatz und diese Ausrichtungseigenschaften haben keine Auswirkung.
• Abbildungen zur Verdeutlichung

[Bild einer Illustration von W3C Zeigt ein Raster an, das kleiner als sein Container ist, wobei „justify-content“ und „align-content“ das Raster innerhalb des Containers ausrichten.]

Auszug aus der Spezifikation

Zur Verdeutlichung werden relevante Auszüge aus der CSS-Grid-Layout-Spezifikation bereitgestellt:

• "Rasterelemente können in der Inline-Dimension ausgerichtet werden, indem die Eigenschaft justify-self für das Rasterelement oder die Eigenschaft justify-items für den Rastercontainer verwendet wird."
• "Rasterelemente können ebenfalls ausgerichtet werden in der Blockdimension ausgerichtet, indem die Eigenschaft align-self für das Rasterelement oder die Eigenschaft align-items für den Rastercontainer verwendet wird Rasterspuren werden innerhalb des Inhaltsfelds gemäß den Eigenschaften „justify-content“ und „align-content“ im Rastercontainer ausgerichtet.“

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