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-Eigenschaft von CSS 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 dann nach ihrer Reihenfolge im Quelltext sortiert. Elementen ohne expliziten order-Wert wird der Standardwert von 0 zugewiesen.

Probieren Sie es aus

In der obigen Demo können Sie die Optionen auf der linken Seite auswählen, um den Wert der order-Eigenschaft des pinkfarbenen Kastens zu ändern. Den hellblauen Kästen wurden feste order-Werte zugewiesen.

Beachten Sie den Effekt der Quellreihenfolge. Wenn beispielsweise order: 2; ausgewählt ist, wird der pinkfarbene Kasten vor den beiden blauen Kästen mit order: 2; platziert. Dies liegt daran, dass der pinkfarbene 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 der Elemente und nicht deren logische oder Tab-Reihenfolge beeinflussen soll, darf es nicht in nicht-visuellen Medien wie Speech verwendet werden.

Diese Eigenschaft, die im CSS display-Modul definiert ist, wirkt sich nur auf Grid- und Flex-Elemente aus. Wenn order auf ein Element gesetzt ist, dessen übergeordnetes Element keine Flex- oder Grid-Container durch die display-Eigenschaft erstellt, hat es keine Wirkung.

Werte

<integer>

Repräsentiert die Ordnungsgruppe, die vom Element verwendet werden soll.

Barrierefreiheit

Die Verwendung der order-Eigenschaft führt zu einer Trennung zwischen der visuellen Darstellung der Inhalte und der Reihenfolge im DOM. Dies wirkt sich nachteilig auf Nutzer mit Sehbehinderungen aus, die mit Unterstützungstechnologien wie einem Screenreader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, werden Ihre Nutzer je nach Zugangsweise zu Ihren Inhalten unterschiedliche Erfahrungen machen.

Formale Definition

Anfangswert0
Anwendbar aufFlex items, grid items, and absolutely-positioned flex and grid container children
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger

Formale Syntax

order = 
  <integer>

Beispiele

Anordnung von Elementen in einem Flex-Container

In diesem Beispiel erstellen wir ein klassisches Zwei-Seitenleisten-Layout.

HTML

Wir fügen einen Header, einen Footer und einen Hauptinhaltsbereich hinzu. Der Hauptinhalt enthält einen Artikel und zwei Seitenleisten. Beachten Sie deren Reihenfolge! Wir verwenden die CSS order-Eigenschaft, um deren 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 mit Funktionen des Flexbox-Layouts; indem wir display auf flex setzen, wird das <main>-Element zu einem Flex-Container. Standardmäßig erzeugt dies Flex-Elemente gleicher vertikaler Größe. Die Seitenleisten erhalten beide eine absolute width, während das <article> den gesamten positiven freien Raum mit einem flex-grow-Faktor durch die flex-Kurzschreibweise ausfüllt.

Wir setzen dann unterschiedliche order-Eigenschaftswerte auf jedes der drei Kinder des Flex-Containers, wodurch die CSS die visuelle Reihenfolge dieser Komponenten definiert, anstatt sie in der im HTML deklarierten Reihenfolge zu 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch