Main Axis

Die Hauptachse im flexbox wird durch die Richtung definiert, die durch die flex-direction Eigenschaft festgelegt ist. Es gibt vier mögliche Werte für flex-direction. Diese sind:

  • row
  • row-reverse
  • column
  • column-reverse

Wenn Sie row oder row-reverse wählen, verläuft Ihre Hauptachse entlang der Zeile in Richtung der Inline-Ausbreitung.

In diesem Bild ist die flex-direction auf row gesetzt, was die Hauptachse bildet

Wählen Sie column oder column-reverse, verläuft Ihre Hauptachse von oben nach unten auf der Seite in Richtung des Blockflusses.

Drei Flex-Elemente nehmen die volle Breite des Containers ein, werden in der Code-Reihenfolge untereinander angezeigt. Die Flex-Richtung ist auf column gesetzt. Die Hauptachse ist vertikal, d.h. von oben nach unten

Auf der Hauptachse können Sie die Größe der Flex-Elemente steuern, indem Sie den verfügbaren Raum den Elementen selbst hinzufügen, durch Verwendung der flex Eigenschaften der Elemente. Oder, Sie können den Raum zwischen und um die Elemente herum durch die Verwendung der justify-content Eigenschaft steuern.

Siehe auch

Eigenschaftsreferenz

Weiterführende Lektüre