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 wurde, 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: 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 wählen Sie die Optionen auf der linken Seite, um den Wert der order-Eigenschaft des pinkfarbenen Kästchens zu ändern. Die hellblauen Kästchen haben feste order-Werte.
Beachten Sie den Effekt der Quellreihenfolge. Wenn zum Beispiel order: 2; ausgewählt wird, wird das pinkfarbene Kästchen vor den beiden blauen Kästchen mit order: 2; platziert. Dies liegt daran, dass das pinkfarbene Kästchen im Quellcode vor den blauen Kästchen 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 gedacht ist, die visuelle Reihenfolge von Elementen zu beeinflussen und nicht deren logische Reihenfolge oder Tab-Reihenfolge, darf es nicht in nicht-visuellen Medien wie Sprache verwendet werden.
Definiert im CSS display Modul, wirkt sich diese Eigenschaft nur auf Grid- und Flex-Elemente aus. Wenn order auf einem Element gesetzt ist, dessen Eltern-display-Eigenschaft keinen Flex- oder Grid-Container erstellt, hat es keine Wirkung.
Werte
<integer>-
Repräsentiert die Ordnungsgruppe, die vom Element verwendet werden soll.
Barrierefreiheit
Die Verwendung der order-Eigenschaft wird eine Trennung zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge erzeugen. Dies wird sich negativ auf sehbehinderte Benutzer auswirken, die mit Unterstützungstechnologien wie einem Bildschirmleser navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, haben Ihre Benutzer unterschiedliche Erfahrungen, 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
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 umfasst 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-Layout Moduls; 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> mit einem über das flex-Shorthand gesetzten flex-grow-Faktor den gesamten positiven freien Raum beansprucht.
Dann setzen wir verschiedene order-Eigenschaftswerte für jedes der drei Kinder des Flex-Containers; dies bedeutet, dass das CSS die visuelle Reihenfolge dieses Bestandteils definiert, anstatt dass es 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 aber visuell in der Mitte dargestellt.
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # order-property |