Haupt- und Querachse in Flexbox-Blöcken in CSS

Über Flexboxen kann man in zwei Begriffen sprechen: das erste ist - Reihe oder Spalte, das zweite - in Begriffen von Achsen. Mit Reihen und Spalten haben wir uns bereits auseinandergesetzt, lassen Sie uns nun mit den Achsen befassen. Das Verständnis der Achsen wird benötigt, um Elemente horizontal oder vertikal auszurichten.

Bei der Arbeit mit Flex-Elementen gibt es immer eine Hauptachse und eine Querachse. Wir können Elemente entlang der Hauptachse und quer zur Hauptachse ausrichten. Die Hauptachse kann 4 Richtungen haben: von links nach rechts, von rechts nach links, von oben nach unten und von unten nach oben.

Die Richtung der Querachse hängt von der Richtung der Hauptachse ab: Wenn die Hauptachse horizontal verläuft, dann verläuft die Querachse von oben nach unten, wenn die Hauptachse vertikal verläuft, dann verläuft die Querachse von links nach rechts. Andere Richtungen kann die Querachse nicht haben.

Die Richtung der Hauptachse wird durch die Eigenschaft flex-direction gesteuert. Wenn diese Eigenschaft den Wert row hat - verläuft die Hauptachse von links nach rechts, hat sie den Wert row-reverse, dann von rechts nach links. Der Wert column richtet die Achse von oben nach unten aus, und der Wert column-reverse von unten nach oben.