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.

Initialwert0
Anwendbar aufflexible Elemente und absolut positionierte Flexcontainerkinder
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger

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

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.

Siehe auch