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 Quellcode-Reihenfolge sortiert. Elementen, denen kein expliziter order-Wert zugewiesen wird, 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;
}
In der obigen Demo wählen Sie die Optionen auf der linken Seite, um den Wert der order-Eigenschaft des rosa Kastens zu ändern. Den hellblauen Kästchen wurden feste order-Werte zugewiesen.
Beachten Sie die Wirkung der Quellreihenfolge. Zum Beispiel, wenn order: 2; ausgewählt ist, wird der rosa Kasten vor den beiden blauen Kästen mit order: 2; platziert. Das liegt daran, dass der rosa Kasten vor den blauen Kästen im Quellcode 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, darf sie nicht in nicht-visuellen Medien wie Speech verwendet werden.
Definiert im CSS display-Modul, beeinflusst diese Eigenschaft nur Grid- und Flex-Elemente. Wenn order auf ein Element eingestellt wird, dessen übergeordnete display-Eigenschaft keinen Flex- oder Grid-Container erstellt, hat das keine Wirkung.
Werte
<integer>-
Repräsentiert die Ordnungsgruppe, die vom Element verwendet werden soll.
Barrierefreiheit
Durch die Verwendung der order-Eigenschaft entsteht ein Unterschied zwischen der visuellen Darstellung von Inhalten und der DOM-Reihenfolge. Dies wirkt sich nachteilig auf sehbehinderte Benutzer aus, die mit Hilfe von unterstützender Technologie wie einem Screenreader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, haben Ihre Benutzer unterschiedliche Erfahrungen, je nachdem, wie sie auf Ihre Inhalte zugreifen.
- Flexbox & the keyboard navigation disconnect via Tink (2016)
- Source Order Matters via Adrian Roselli (2015)
- Understanding WCAG, Guideline 1.3 explanations
- Understanding Success Criterion 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
Anordnen von Elementen in einem Flex-Container
In diesem Beispiel erstellen wir ein klassisches Zwei-Sidebar-Layout.
HTML
Wir fügen einen Header, einen Footer und einen Hauptinhaltbereich ein. Der Hauptinhalt enthält einen Artikel und zwei Sidebars. 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 Eigenschaften des flexiblen Box-Layouts; indem wir display auf flex setzen, wird das <main>-Element zu einem Flex-Container. Dies erzeugt standardmäßig Flex-Elemente von gleicher vertikaler Größe. Den Sidebars wird eine absolute width zugewiesen, während das <article> allen positiven freien Raum mit einem flex-grow-Faktor, der über die flex-Abkürzung gesetzt ist, einnimmt.
Wir setzen dann unterschiedliche order-Eigenschaftswerte auf jedes der drei Kinder des Flex-Containers; das bedeutet, dass das CSS die visuelle Reihenfolge dieser Komponenten definiert, anstatt sie in der im HTML angegebenen Reihenfolge erscheinen zu lassen.
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 jedoch visuell in der Mitte angezeigt.
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # order-property |