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 anschließend nach ihrer Quellcode-Reihenfolge sortiert. Elementen ohne expliziten order-Wert wird der Standardwert 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: 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-Beispiel wählen Sie die Optionen auf der linken Seite aus, um den Wert der order-Eigenschaft des pinken Kastens zu ändern. Den hellblauen Kästen wurden feste order-Werte zugewiesen.
Bedenken 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. Dies liegt daran, dass der pinke Kasten im Quellcode vor den blauen Kästen erscheint.
Syntax
/* <integer> values */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;
Da order nur dazu bestimmt ist, die visuelle Reihenfolge der Elemente und nicht deren logische oder Tab-Reihenfolge zu beeinflussen, sollte es nicht in nicht-visuellen Medien wie Sprache verwendet werden.
Definiert im CSS display-Modul, beeinflusst diese Eigenschaft nur Grid- und Flex-Elemente. Wenn order auf ein Element gesetzt wird, dessen Eltern-display-Eigenschaft keinen Flex- oder Grid-Container erstellt, hat es keine Wirkung.
Werte
<integer>-
Stellt die Ordinalgruppe dar, die vom 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 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, werden Ihre Benutzer je nach Zugriffsart unterschiedliche Inhalte erleben.
- Flexbox & the keyboard navigation disconnect über Tink (2016)
- Source Order Matters über Adrian Roselli (2015)
- Verständnis der WCAG, Richtlinie 1.3 Erklärungen
- Verständnis 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 Hauptinhaltsbereich hinzu. Der Hauptinhalt enthält einen Artikel und zwei Seitenleisten. Beachten Sie deren Reihenfolge! Wir verwenden die CSS-order-Eigenschaft, um ihre 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 der Flexbox-Layout-Modulfunktion; indem wir display auf flex setzen, wird das <main>-Element zu einem Flex-Container. Standardmäßig werden dadurch Flex-Elemente mit gleicher vertikaler Größe erstellt. Den Seitenleisten wird eine absolute width zugewiesen, während der <article> den gesamten positiven freien Platz mit einem flex-grow-Faktor über die flex-Kurzform einnimmt.
Wir setzen dann unterschiedliche order-Eigenschaftswerte auf jedes der drei Kinder des Flex-Containers; das bedeutet, dass das CSS die visuelle Reihenfolge dieser Komponente definiert, anstatt dass sie in der im HTML deklarierten Reihenfolge erscheint.
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 gerendert.
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # order-property |
Browser-Kompatibilität
Loading…