order
Ü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 | Flex items, grid items, and absolutely-positioned flex and grid container children |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Integer |
Siehe die Verwendung von flexiblen Boxen für mehr Informationen.
order
null
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.
order =
<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
BCD tables only load in the browser
[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
.