CSS/Eigenschaften/flex-direction

Browserunterstützung
caniuse.com

Die Eigenschaft flex-direction legt die Verlaufsrichtung der Hauptachse fest

Erlaubte Werte

• row: (Standardwert) die Hauptachse entspricht der Schreibrichtung. Bitte beachten Sie, dass die Schreibrichtung auch vertikal verlaufen kann, die Hauptachse ist dann ebenfalls vertikal.
• row-reverse: die Hauptachse läuft entgegengesetzt zur Schreibrichtung
• column: die Hauptachse entspricht der Blockachse. Bei horizontaler Schreibrichtung werden die Flex-Elemente vertikal in einer Spalte angeordnet, bei vertikaler Schreibrichtung erfolgt die Anordnung horizontal.
• column-reverse: die Hauptachse läuft entgegengesetzt zur Blockachse

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

row

anwendbar auf

flexible Container

Vererbung

nein

animierbar

nein

Beispiel

main {
  display: flex;
  flex-direction: column;
}
 
/* große Viewports */
@media all and (min-width: 40em) {
  main {
    flex-direction: row;
  }
  header, article, nav, section, aside, footer {
    flex: 1 ;
  }
}

Im Beispiel sind alle flexiblen Elemente untereinander angeordnet. Erst auf großen Viewports wird mittels media queries flex-direction: row; eingestellt, sodass die flexiblen Elemente nebeneinander platziert werden.

Siehe auch

• CSS/Tutorials/Flexbox/Flex-Container

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - flex-direction-property
• MDN: flex-direction
• Details: caniuse.com