Hauptachse

Die Hauptachse in flexbox wird durch die Richtung definiert, die durch die flex-direction Eigenschaft festgelegt wird. 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 der Inline-Richtung.

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

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

Drei Flex-Elemente nehmen die gesamte Breite des Containers ein und werden in Code-Reihenfolge untereinander angezeigt. Flex-direction ist auf column eingestellt. Die Hauptachse verläuft vertikal, d.h. von oben nach unten

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

Siehe auch

Eigenschaftenreferenz

Weiterführende Literatur