Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: flex-direction, Kategorien: Bildschirm­darstellung (allgemein), Flexible Box Layout (CSS 3)

Ausrichtung in einer Flexbox

Steuert, in welcher Richtung die Elemente in einer Flexbox angeordnet werden.

CSS-Eigenschaft: flex-direction
KurzbeschreibungWerteStandardwertKategorieHinweis
Ausrichtung in einer Flexbox
  • row
  • row-reverse
  • column
  • column-reverse
row
Allgemein:
Bildschirm­darstellung
CSS 3:
Flexible Box Layout
Neu in CSS 3
 

Folgendes ist beim Einsatz von flex-direction zu beachten:

flex-direction gehört zu den Eigenschaften des CSS3-Flexbox-Moduls, oder auch kurz Flexbox genannt.

Damit flex-direction greift, muss die CSS-Eigenschaft display einen der Werte flex (bzw. -webkit-flex) oder inline-flex (bzw. -webkit-inline-flex) haben (Vergleichbar zu top oder left, die beispielsweise auch erst greifen, wenn position einen der Werte absolute, relative oder fixed hat).

flex-direction steuert dabei die Reihenfolge der Element in einer Flexbox und kann einen der folgenden vier Parameter haben:

  • row: Steuert die Darstellung der Elemente von links nach rechts (Standardwert).
  • row-reverse: Steuert die Darstellung der Elemente von rechts nach links.
  • column: Steuert die Darstellung der Elemente von oben nach unten.
  • column-reverse: Steuert die Darstellung der Elemente von unten nach oben.

Zu beachten ist auch, dass sich flex-direction und die CSS3-Eigenschaft order gegenseitig beeinflussen. Wird über order die Reihenfolge aktiv gesteuert und über flex-direction die Reihenfolge umgedreht, wird damit auch die aktive Ordnung von order umgedreht.

Wird aktuell (Januar 2013) von Opera (ab der Version 12.10) sowie von Google Chrome (ab der Version 21.0) mit dem Vendor-Präfix -webkit- unterstützt.

Stand Juli 2013: Firefox unterstützt das Flexbox-Modul in der Version 18 und 19, wenn in der about:config der Parameter layout.css.flexbox.enabled auf true gesetzt ist. Ab der Version 20 von Firefox wird das Flexbox-Modul in der Standardschreibweise unterstützt.

Hinweis:

Eine allgemeine Einführung in das CSS3-Modul Flexbox ist bei den Webkrauts zu finden: CSS3 Flexbox: Ablösung für Float-Layouts

Browserunterstützung von flex-direction
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
nj
Version: 20Version: 30Version: 35Version: 36Version: 37
nj
Version: 8Version: 9Version: 10Version: 11
n-ms-j
Version: 4Version: 5Version: 6
n
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu flex-direction:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    flex-basis


Beispiele

HTML:

<div>
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

/* Herstellen der Ausgangssituation:
Für alle Beispiele wird ein Rahmen für die Flexbox sowie für alle darin liegenden Element definiert. Abstände sorgen für etwas mehr Übersichtlichkeit. Jedes einzelne Element erhält zusätzlich eine individuelle Hintergrundfarbe.*/
div {
    border: 2px solid #999;
}
div div {
    border: 2px solid #333;
    margin: 5px;
    padding: 5px;
}
.box-1 {
    background-color: #99ff00;
}
.box-2 {
    background-color: #ffff00;
}
.box-3 {
    background-color: #ff9900;
}
.box-4 {
    background-color: #ff0000;
}
Beispiel nur für: FirefoxGoogle ChromeInternet ExplorerSafariOpera

Beispiel Nr. 1 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="example-1">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#example-1 {
    display: -webkit-flex;
    display: flex;
}
/* Über die CSS-Eigenschaft display und einen der Parameter display: flex (-webkit-flex) oder inline-flex (-webkit-inline-flex) wird das Flexbox-Verhalten "aktiviert".
Falls kein Parameter für flex-direction gesetzt ist, verwendet der Browser automatisch flex-direction: row (Standardwert). 
Damit werden in einer Flexbox die Boxen reihenweise von links nach rechts dargestellt. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 2 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="example-2">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#example-2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
/* flex-direction ist hier auf row gesetzt. Da dieser Parameter der Standardwert ist, unterscheidet sich die Darstellung nicht von der im Beispiel Nr. 2. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 3 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="example-3">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#example-3 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/* Über column wird eine spaltenweise Darstellung gesteuert. (Sieht aus, wie die Darstellung ohne flex wie in Beispiel Nr. 1, allerdings sind in der Flexbox die Abstände der einzelnen DIVs anders als ohne Flex-Eigenschaft.). */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 4 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="example-4">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#example-4 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
/* Der Parameter column-reverse für flex-direction steuert ebenfalls eine spaltenweise Anordnung der Boxen, allerdings von unten nach oben. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 5 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="example-5">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#example-5 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
/* Entsprechend dreht der Parameter row-reverse die Reihenfolge innerhalt einer Reihe um. Die DIVs werden von rechts nach links angezeigt.*/
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 6 So sieht's aus:

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="testcase-vendor">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#testcase-vendor {
    display: -moz-flex;
    display: -webkit-flex;
    display: -o-flex;
    display: -ms-flex;
 
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -o-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
}
Beispiel nur für: Google Chrome
-webkit-: 21

Testbeispiel: Schreibweise mit
Vendor-Präfix

Block 1
Block 2
Block 3
Block 4
 

HTML:

<div id="testcase-standard">
   <div class="box-1">Block 1</div>
   <div class="box-2">Block 2</div>
   <div class="box-3">Block 3</div>
   <div class="box-4">Block 4</div>
</div>

CSS:

#testcase-standard {
    display: flex;
    flex-direction: row-reverse;
}
Beispiel nur für: Firefox
W3C: 20
Opera
W3C: 12.1

Testbeispiel: Standardschreibweise

Block 1
Block 2
Block 3
Block 4
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.987 sec.

Browser-Marktanteile