CSS/Eigenschaften/flex-direction

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • Defaultwert: row
anwendbar auf flexible Container (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
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.

Weblinks

Siehe auch