CSS-Eigenschaft: flex-direction, Kategorien: Bildschirmdarstellung (allgemein), Flexible Box Layout (CSS 3)
Ausrichtung in einer Flexbox
Steuert, in welcher Richtung die Elemente in einer Flexbox angeordnet werden.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Ausrichtung in einer Flexbox |
| row |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Flexible Box Layout (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- direction
- display
- flex
- flex-basis
- Aktuelle Seite: flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- justify-content
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- visibility
- zoom
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
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu flex-direction:
- W3C Spezifikation:
http://www.w3.org/TR/css3-flexbox/#flex-direction - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
flex-basis - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
flex-flow
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 Nr. 1 So sieht's aus:
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 Nr. 2 So sieht's aus:
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 Nr. 3 So sieht's aus:
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 Nr. 4 So sieht's aus:
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 Nr. 5 So sieht's aus:
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 Nr. 6 So sieht's aus:
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;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
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;
}Testbeispiel: Standardschreibweise
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!