order

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die order CSS-Eigenschaft legt die Reihenfolge fest, in der ein Element in einem Flex- oder Grid-Container angeordnet wird. Elemente in einem Container werden nach aufsteigendem order-Wert und anschließend nach ihrer Reihenfolge im Quellcode sortiert. Elemente ohne expliziten order-Wert erhalten den Standardwert 0.

Probieren Sie es aus

order: 0;

order: 3;

order: -1;

order: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Box 1:</div>
  <div style="order: 1">Box 2: <code>order: 1;</code></div>
  <div style="order: 2">Box 3: <code>order: 2;</code></div>
  <div style="order: 2">Box 4: <code>order: 2;</code></div>
  <div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>

.default-example {
  max-height: 300px;
  display: flex;
  flex-flow: column;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 0.5rem;
  padding: 0.5rem;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

#example-element::after {
  content: attr(style);
  outline: 2px dashed;
  font-family: monospace;
}

Im obigen Demo können Sie die Optionen auf der linken Seite auswählen, um den Wert der order-Eigenschaft des pinken Kastens zu ändern. Die hellblauen Kästen haben feste order-Werte erhalten.

Beachten Sie den Effekt der Quellreihenfolge. Zum Beispiel, wenn order: 2; ausgewählt ist, wird der pinke Kasten vor den beiden blauen Kästen mit order: 2; platziert. Das liegt daran, dass der pinke Kasten im Quellcode vor den blauen Kästen erscheint.

Syntax

css

/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

Da order nur die visuelle Reihenfolge von Elementen beeinflussen soll und nicht deren logische Reihenfolge oder Tab-Reihenfolge, darf es nicht in nicht-visuellen Medien wie Sprache verwendet werden.

Definiert im CSS display-Modul, wirkt sich diese Eigenschaft nur auf Grid- und Flex-Elemente aus. Wenn order auf einem Element gesetzt ist, dessen Eltern-display-Eigenschaft keinen Flex- oder Grid-Container erzeugt, hat es keine Wirkung.

Werte

<integer>: Repräsentiert die Ordinalgruppe, die für das Element verwendet werden soll.

Barrierefreiheit

Die Verwendung der order-Eigenschaft führt zu einer Diskrepanz zwischen der visuellen Darstellung von Inhalten und der DOM-Reihenfolge. Dies wirkt sich negativ auf sehbehinderte Nutzer aus, die auf Unterstützungs-Technologie wie einen Bildschirmleser angewiesen sind. Wenn sich die visuelle Reihenfolge von der DOM-Reihenfolge unterscheidet, haben Ihre Nutzer unterschiedliche Erfahrungen, je nachdem, wie sie auf Ihre Inhalte zugreifen.

Flexbox & die Diskrepanz bei der Tastaturnavigation über Tink (2016)
Die Reihenfolge der Quelle zählt über Adrian Roselli (2015)
Erklärung der WCAG Richtlinie 1.3
Erklärung des Erfolgskriteriums 1.3.2 | W3C Understanding WCAG 2.0

Formale Definition

Anfangswert	`0`
Anwendbar auf	Flex items, grid items, and absolutely-positioned flex and grid container children
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Integer

Formale Syntax

order = 
  <integer>

Beispiele

Elemente in einem Flex-Container anordnen

In diesem Beispiel erstellen wir ein klassisches Layout mit zwei Seitenleisten.

HTML

Wir fügen einen Header, einen Footer und einen Hauptbereich ein. Der Hauptbereich umfasst einen Artikel und zwei Seitenleisten. Beachten Sie ihre Reihenfolge! Wir verwenden die CSS-order-Eigenschaft, um ihre visuelle Reihenfolge zu ändern.

html

<header>Header</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>Footer</footer>

CSS

Wir gestalten den Hauptbereich mittels der Flexbox-Layout-Modul-Funktionen; indem wir display auf flex setzen, wird das <main>-Element zu einem Flex-Container. Standardmäßig erzeugt dies Flex-Elemente mit gleicher vertikaler Größe. Die Seitenleisten erhalten beide eine absolute width, während der <article> den gesamten positiven freien Raum mit einem flex-grow-Faktor verbrauchen wird, der über das flex-Shorthand festgelegt wird.

Wir setzen unterschiedliche order-Eigenschaften auf jedes der drei Kinder des Flex-Containers; dies bedeutet, dass das CSS die visuelle Reihenfolge dieser Komponenten bestimmt, anstatt dass sie in der im HTML deklarierten Reihenfolge erscheinen.

css

main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}

Ergebnis

Der <article> erscheint zuerst in der Quellreihenfolge, wird jedoch visuell in der Mitte gerendert.

Spezifikationen

Specification
CSS Display Module Level 3 # order-property