Übersicht
Die order CSS Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des order Werts dargestellt. Elemente mit dem gleichen order Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.
Hinweis: order beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. order darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.
| Initialwert | 0 |
|---|---|
| Anwendbar auf | flexible Elemente und absolut positionierte Flexcontainerkinder |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animationstyp | Integer |
| Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Siehe die Verwendung von flexiblen Boxen für mehr Informationen.
order ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.Syntax
/* Nummerische Werte inklusive negativer Zahlen */ order: 5; order: -5; /* Globale Werte */ order: inherit; order: initial; order: unset;
Werte
<integer>- Repräsentiert die ordinale Position des Flexelements.
<integer>
Beispiele
Einfache HTML-Struktur:
<!DOCTYPE html> <header>…</header> <div id='main'> <article>…</article> <nav>…</nav> <aside>…</aside> </div> <footer>…</footer>
Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| CSS Flexible Box Layout Module Die Definition von 'order' in dieser Spezifikation. |
Anwärter Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
order | Chrome
Vollständige Unterstützung
29
| Edge
Vollständige Unterstützung
12
| Firefox
Vollständige Unterstützung
20
| IE
Vollständige Unterstützung
11
| Opera Vollständige Unterstützung 12.1 | Safari
Vollständige Unterstützung
9
| WebView Android
Vollständige Unterstützung
4.4
| Chrome Android
Vollständige Unterstützung
29
| Firefox Android
Vollständige Unterstützung
20
| Opera Android Vollständige Unterstützung 12.1 | Safari iOS
Vollständige Unterstützung
9
| Samsung Internet Android ? |
| Absolutely-positioned flex children | Chrome Vollständige Unterstützung Ja | Edge Vollständige Unterstützung 12 | Firefox Keine Unterstützung Nein | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 12.1 | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android Keine Unterstützung Nein | Opera Android Vollständige Unterstützung 12.1 | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
- Siehe Implementierungshinweise.
- Siehe Implementierungshinweise.
- Benutzer muss dieses Feature explizit aktivieren.
- Benutzer muss dieses Feature explizit aktivieren.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.
Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe Bug 812687.
[2] Im Internet Explorer 10 wird ein flexibler Container durch display:-ms-flexbox angegeben, nicht durch display:flex.