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. Elemente, denen kein expliziter order
-Wert zugewiesen wird, erhalten den Standardwert 0
.
Probieren Sie es aus
In der obigen Demo wählen Sie die Optionen auf der linken Seite, um den order
-Wert des pinkfarbenen Kastens zu ändern. Die hellblauen Kästen haben feste order
-Werte erhalten.
Beachten Sie den Effekt der Quellreihenfolge. Wenn zum Beispiel 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
/* <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 order
nicht auf nicht-visuellen Medien wie speech verwendet werden.
In dem CSS display-Modul definiert, wirkt sich diese Eigenschaft nur auf Grid- und Flex-Elemente aus. Wenn order
auf ein Element angewendet wird, dessen Elternelement die display
-Eigenschaft nicht mit einem Flex- oder Grid-Container erstellt, hat die order
-Eigenschaft keine Wirkung.
Werte
<integer>
-
Repräsentiert die zu verwendende Ordnungsgruppe des Elements.
Barrierefreiheit
Die Verwendung der order
-Eigenschaft führt zu einer Diskrepanz zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge. Dies wirkt sich nachteilig auf Benutzer mit Sehbehinderungen aus, die mithilfe von unterstützenden Technologien wie einem Screenreader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, werden Ihre Benutzer unterschiedliche Erfahrungen machen, je nachdem, wie sie auf Ihren Inhalt 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
Initialer Wert | 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 Hauptinhaltbereich hinzu. Der Hauptinhalt enthält einen Artikel und zwei Seitenleisten. Beachten Sie ihre 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 den Funktionen des flexiblen Box-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 Freiraum mit einem via flex
Kurzschreibweise gesetzten flex-grow
-Faktor ausfüllt.
Wir setzen dann unterschiedliche order
-Eigenschaftswerte für jedes der drei Kinder des Flex-Containers fest; dies bedeutet, dass das CSS die visuelle Reihenfolge dieses Komponenten definiert, anstatt dass sie in der Reihenfolge erscheint, die im HTML deklariert ist.
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