Referenz:CSS/Eigenschaften/flex-direction

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft flex-direction CSS 3.0
Beschreibung 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
default-Wert

row

anwendbar auf flexible Container (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif flex-direction property
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, so dass die flexiblen Elemente nebeneinander platziert werden.

Beachten Sie

{{{Hinweis}}}

Tipp

{{{Tipp}}}