Ü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.

Initialwert0
Anwendbar aufflexible Elemente und absolut positionierte Flexcontainerkinder
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimationstypInteger
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

Hinweis: 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 21
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Since Firefox 28, multi-line flexbox is supported.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 18 — 28
Deaktiviert
Deaktiviert From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 10
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Opera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 4.4
Vollständige Unterstützung 4.4
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Since Firefox 28, multi-line flexbox is supported.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 18 — 28
Deaktiviert
Deaktiviert From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 12.1Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
Absolutely-positioned flex childrenChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Vollständige Unterstützung 10Opera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung JaWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 12.1Safari iOS Vollständige Unterstützung JaSamsung 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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, fscholz, Sebastianz
Zuletzt aktualisiert von: SJW,