Align-Items vs. Align-Content: Wann ist „-Content' tatsächlich wichtig?

Unterscheidung von Align-Items und Align-Content im Rasterlayout

Verstehen Sie beim Arbeiten mit dem Rasterlayout den Unterschied zwischen „ausrichten/ausrichten“. -items“ und „justify/align-content“ sind entscheidend. Dieser Artikel zielt darauf ab, ihre Unterschiede zu klären, insbesondere im Hinblick auf die Behauptung, dass „-content“-Eigenschaften aufgrund des Szenarios existieren, in dem die Rastergröße kleiner als der Container ist.

Definition der Terminologie

• Rastercontainer: Der übergeordnete Container sowohl des Rasters als auch der Rasterelemente, der den Rasterformatierungskontext festlegt.
• Raster: Sich überschneidende Vertikale und Horizontale Linien, die den Container in Rasterbereiche unterteilen, die Rasterelemente enthalten.
• Rasterelemente: In-Flow-Inhaltsfelder innerhalb des Rastercontainers.

Ausrichten -Content vs. Align-Items

• Align-Content: Richtet das Raster innerhalb des Containers aus.
• Align-Items: Richtet Rasterelemente innerhalb des Rasters aus.

Klarstellung der „-Content“-Eigenschaft

Die Behauptung, dass „-content“-Eigenschaften nur aufgrund des Rasters existieren könnte kleiner sein als der Behälter, ist irreführend. In der bereitgestellten Abbildung ist das Raster tatsächlich kleiner, sodass align-content Platz für die vertikale Zentrierung des Rasters und justify-content für die rechte Ausrichtung bietet. Diese Eigenschaften gelten jedoch weiterhin, wenn die Rastergröße der Behältergröße entspricht, allerdings ohne visuelle Wirkung, da kein zusätzlicher Platz vorhanden ist.

Spezifikationszusammenfassung

• justify-self/justify-items: Inline-Achsenausrichtung für Rasterelemente.
• align-self/align-items: Block-Achsenausrichtung für Rasterelemente.
• justify-content/align-content: Rasterausrichtung innerhalb des Containers, wenn seine Außenkanten nicht an den Rändern des Containerinhalts ausgerichtet sind.

Das obige ist der detaillierte Inhalt vonAlign-Items vs. Align-Content: Wann ist „-Content' tatsächlich wichtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!