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 dann nach ihrer Reihenfolge im Quellcode sortiert. Elementen, die keinen expliziten order-Wert zugewiesen bekommen, wird der Standardwert von 0 zugewiesen.
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: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
margin: 0.5rem;
padding: 0.5rem;
flex: 1;
}
#example-element {
background-color: rgba(255, 0, 200, 0.2);
border: 3px solid rebeccapurple;
}
#example-element::after {
content: attr(style);
outline: 2px dashed;
font-family: monospace;
}
In der obigen Demo können Sie die Optionen auf der linken Seite auswählen, um den Wert der order-Eigenschaft der rosa Box zu ändern. Die hellblauen Boxen haben feste order-Werte zugewiesen bekommen.
Beachten Sie die Auswirkung der Quellreihenfolge. Wenn zum Beispiel order: 2; ausgewählt wird, wird die rosa Box vor den beiden blauen Boxen mit order: 2; platziert. Das liegt daran, dass die rosa Box im Quellcode vor den blauen Boxen erscheint.
Syntax
/* <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 und nicht deren logische oder Tab-Reihenfolge beeinflussen soll, sollte es nicht in nicht-visuellen Medien wie Speech verwendet werden.
Definiert im CSS display-Modul, betrifft diese Eigenschaft nur Grid- und Flex-Elemente. Wenn order auf ein Element gesetzt wird, dessen Elternelement keine Flex- oder Grid-Container durch die display-Eigenschaft erstellt, hat dies keine Wirkung.
Werte
<integer>-
Repräsentiert die ordinale Gruppe, die für das Element verwendet werden soll.
Barrierefreiheit
Die Verwendung der order-Eigenschaft führt zu einer Trennung zwischen der visuellen Darstellung von Inhalten und der DOM-Reihenfolge. Dies wirkt sich negativ auf Benutzer mit Sehbehinderungen aus, die mit Hilfe von Unterstützungstechnologien wie einem Screenreader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, haben Ihre Benutzer unterschiedliche Erlebnisse, je nachdem, wie sie auf Ihre Inhalte zugreifen.
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
Reihenfolge von Elementen in einem Flex-Container
In diesem Beispiel erstellen wir ein klassisches Layout mit zwei Seitenleisten.
HTML
Wir fügen einen Header, einen Footer und einen Hauptinhaltsbereich ein. 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.
<header>Header</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>Footer</footer>
CSS
Wir gestalten den Hauptbereich mit den Funktionen des flexiblen Box-Layouts; indem wir display auf flex setzen, wird das <main>-Element zu einem Flex-Container. Standardmäßig erstellt dies Flex-Elemente von 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 verbraucht, der über die flex-Kurzschrift gesetzt wird.
Wir setzen dann verschiedene order-Werte für jedes der drei Kinder des Flex-Containers; das bedeutet, dass das CSS die visuelle Reihenfolge dieser Komponenten definiert, anstatt dass sie in der Reihenfolge erscheinen, in der sie im HTML deklariert wurden.
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
Das <article> erscheint zuerst in der Quellreihenfolge, wird aber visuell in der Mitte gerendert.
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # order-property |