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
  • row-reverse: die Hauptachse läuft entgegengesetzt zur Schreibrichtung
  • column: die Hauptachse entspricht der Blockachse, es wird alles vertikal in einer Spalte angeordnet
  • column-reverse: die Hauptachse läuft entgegengesetzt zur Blockachse, es wird alles vertikal in einer Spalte angeordnet
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: 800px) {
  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}}}