Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Hauptachse

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

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

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

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

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

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

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