CSS-Eigenschaft: order, Kategorien: Bildschirmdarstellung (allgemein), Flexible Box Layout (CSS 3)
Reihenfolge in Flexboxen
Steuert die Reihenfolge von Flexbox-Elementen.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Reihenfolge in Flexboxen |
| 0 |
| 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
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- justify-content
- min-height
- min-width
- opacity
- Aktuelle Seite: 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 order zu beachten:
order steuert über Integer-Werte die Reihenfolge von Elementen in einer Flexbox.
- Wirkt nur im Kontext einer sogenannten Flexbox, sprich: die Flexbox-Eigenschaft muss aktiv über
die CSS-Eigenschaft display mit einem der Werte
flex
oderinline-flex
aktiviert sein. - Zulässig sind positive und negative Ganzzahlwerte einschließlich 0. Wird für HTML-Elemente in einer Flexbox keine oder-Eigenschaft gesetzt, haben diese den Standardwert 0. Diese Elemente werden dann wie in der Reihenfolge im HTML-Quelltext angezeigt. Auch HTML-Elemente mit dem gleichen order-Wert werden nach der Reihenfolge im Quelltext dargestellt.
- Die Elemente in einer Flexbox sortieren sich nach der natürlichen Reihenfolge der Zahlen. Beginnend mit der größten negativen Zahl, dann dem bzw. den Elementen mit 0-Werten, dann die Elemente mit positiven Zahlen aufsteigend.
- Dabei müssen die Zahlen nicht aufeinander folgend sein. Vergleichbar mit dem z-index dürfen zwischen den einzenlen Zahlwerten Lücken sein.
- Wird über die CSS3-Eigenschaft flex-direction und einen der Werte
row-reverse
odercolumn-reverse
die generelle Reihenfolge in einer Zeile beziehungsweise Spalte umgedreht, wirkt order entsprechend umgekehrt. - Die Reihenfolge in anderen HTML-Elementen, beispielsweise in Tabellen, ist nicht über order beeinflussbar.
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 order:
- W3C Spezifikation:
http://www.w3.org/TR/css3-flexbox/#order - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/order
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
opacity - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
orientation
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.
Über display: flex wird das Flexbox-Verhalten aktiviert, per flex-direction: row (Standardwert) wird die Darstellung in eine Reihe von links nach rechts definiert. flex-grow: 1 sorgt dafür, dass sich die vier Boxen sich automatsich an die verfügbare Breite anpassen. */
div {
border: 2px solid #999;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
div div {
border: 2px solid #333;
margin: 5px;
padding: 25px 5px;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
flex-grow: 1;
}
.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 .box-1 {
-webkit-order: 3;
order: 3;
}
#example-1 .box-2 {
-webkit-order: 1;
order: 1;
}
#example-1 .box-3 {
-webkit-order: 4;
order: 4;
}
#example-1 .box-4 {
-webkit-order: 2;
order: 2;
}
/* Die Reihenfolge der Elemente in einer Flexbox können gezielt gesteuert werden. */
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 .box-1 {
-webkit-order: 20;
order: 20;
}
#example-1 .box-2 {
-webkit-order: -5;
order: -5;
}
#example-2 .box-3 {
-webkit-order: -10;
order: -10;
}
#example-2 .box-4 {
-webkit-order: 18;
order: 18;
}
/* Die Integerwerte für die einzelnen Flexbox-Elemente müssen nicht stringent aufeinander folgend sein. Und auch negative Werte sind möglich.
Die Reihenfolge der Elemente entspricht der natürlichen Reihenfolge der Ganzzahlen.*/
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 .box-2 {
-webkit-order: 1;
order: 1;
}
/* Standardwert für order ist 0. In diesem Beispiel ist nur die 2. Box mit order versehen. Da der Wert 1 größer ist als der Standardwert 0 aller anderen Elemente, wird diese Box als letztes angezeigt. */
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 .box-3 {
-webkit-order: -1;
order: -1;
}
/* In diesem Fall macht man sich den Standardwert 0 umgekehrt zu Nutzen. Da nur die Box 3 einen Wert für order hat, dieser aber kleiner als 0 ist, wird diese Box als erste angezeigt. */
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: column;
flex-direction: column;
}
#example-5 div {
padding: 10px 5px;
}
#example-5 .box-1 {
-webkit-order: 1;
order: 1;
}
/* Das Beeinflussen der Reihenfolge ist unabhängig davon, ob die Flexbox-Elemente horizontal oder vertikal angeordnet sind. Durch den Wert 1 für die 1. Box wandert diese ans Ende.*/
Beispiel Nr. 6 So sieht's aus:
HTML:
<div id="example-6">
<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-6 {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
#example-6 div {
padding: 10px 5px;
}
#example-6 .box-1 {
-webkit-order: 1;
order: 1;
}
/* In Beispiel Nr. 7 wird über flex-direction: column-reverse grundsätzlich die Reihenfolge von unten nach oben definiert.
Über order: 1 wird die Box 1 ans Ende der Elemente in der Flexbox gesetzt, da diese alle den Standardwert 0 für order haben.
Innerhalb der umgekehrten Reichenfolge der Flexbox-Elemente ist dadurch Box 1 oben, was in der grunsätzilchen Reihenfolge eben das letzte Element in der Darstellung ist. */
Beispiel Nr. 7 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 .box-1 {
-moz-order: 1;
-webkit-order: 1;
-o-order: 1;
-ms-order: 1;
}
#testcase-vendor .box-4 {
-moz-order: -1;
-webkit-order: -1;
-o-order: -1;
-ms-order: -1;
}
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 .box-1 {
order: 1
}
#testcase-standard .box-4 {
order: -1
}
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!