PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

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

Reihenfolge in Flexboxen

Steuert die Reihenfolge von Flexbox-Elementen.

CSS-Eigenschaft: order
KurzbeschreibungWerteStandardwertKategorieHinweis
Reihenfolge in Flexboxen
  • <integer>
0
Allgemein:
Bildschirm­darstellung
CSS 3:
Flexible Box Layout
Neu in CSS 3
 

Verwandte Eigenschaften aus der Kategorie: Bildschirm­darstellung (allgemein), Flexible Box Layout (CSS 3):

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 oder inline-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 oder column-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

Browserunterstützung von order
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 order:

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


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 nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

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 .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 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 .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 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 .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 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 .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 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: 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 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="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 nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 7 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 .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;
}
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  .box-1 {
    order: 1
}
#testcase-standard  .box-4 {
    order: -1
}
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: 17. 01. 2024
Render Time: 0.046 sec.