CSS-Box-Ausrichtung

Das CSS-Box-Ausrichtungsmodul spezifiziert CSS-Eigenschaften zur Ausrichtung von Boxen innerhalb ihrer Container. Es definiert die Ausrichtung der verschiedenen CSS-Box-Layout-Modelle, einschließlich Block-Layout, Tabellen-Layout, flexibles Box-Layout (Flexbox) und Raster-Layout, und schafft eine konsistente Ausrichtungsmethode über alle CSS-Methoden hinweg.

Das Modul beschreibt Ausrichtungsbegriffe und ermöglicht die Verwendung von Ausrichtungseigenschaften in mehreren Layout-Modulen, anstatt sie auf eine bestimmte Layout-Methode zu beschränken.

Die Ausrichtung ist mit Schreibrichtungen verknüpft, da wir bei der Ausrichtung eines Elements nicht darauf achten, ob wir es an den physischen Dimensionen oben, rechts, unten und links ausrichten. Stattdessen beschreiben wir die Ausrichtung in Bezug auf den Anfang und das Ende der jeweiligen Dimension, mit der wir arbeiten. Dies stellt sicher, dass die Ausrichtung unabhängig von der Schreibrichtung des Dokuments auf die gleiche Weise funktioniert.

Die Ausrichtung von Text und Inhalten auf Inline-Ebene ist im CSS Textmodule und im CSS Inline-Modul definiert.

Referenz

CSS-Eigenschaften

• align-content
• align-items
• align-self
• justify-content
• justify-items
• justify-self
• place-content
• place-items
• place-self

Datentypen

• <baseline-position>
• <content-distribution>
• <content-position>
• <overflow-position>
• <self-position>

Begriffe und Definitionen

• Ausrichtungscontainer
• Ausrichtungsobjekt
• Grundlinienausrichtung
• Verteilte Ausrichtung
• Ersatz-Ausrichtung
• Positionsausrichtung

Leitfäden

Übersicht der Box-Ausrichtung

Übersicht über die allgemeinen Konzepte im CSS-Box-Ausrichtungsmodul.

Box-Ausrichtung in Flexbox

Wie die Box-Ausrichtung im Kontext von Flexbox funktioniert.

Box-Ausrichtung im CSS-Raster-Layout

Wie die Box-Ausrichtung im Kontext des Raster-Layouts funktioniert.

Box-Ausrichtung im Mehrspalten-Layout

Wie die Box-Ausrichtung im Kontext des Mehrspalten-Layouts funktioniert.

Box-Ausrichtung für Block-, absolut positioniertes und Tabellen-Layout

Wie die Box-Ausrichtung im Kontext von Block-Layout, einschließlich gefloateter, positionierter und Tabellenelemente, funktioniert.

Verwandte Konzepte

• alignment-baseline
• dominant-baseline
• scroll-snap-align
• SVG-dominant-baseline-Attribut
• Sekundärachse
• Hauptachse

CSS-Abstände Modul

• column-gap
• gap
• row-gap

Spezifikationen

Siehe auch

• Grundkonzepte der Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Raster-Layout
• CSS-Display Modul
• CSS flexibles Box-Layout Modul
• CSS-Raster-Layout Modul