order

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. Die hellblauen Kästen haben feste order-Werte erhalten.

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 im Quellcode vor den blauen Kästen erscheint.

/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

Da order ausschließlich die visuelle Reihenfolge von Elementen und nicht deren logische oder Tabulatorreihenfolge beeinflussen soll, darf es nicht auf 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 ein Element gesetzt wird, dessen Eltern-display-Eigenschaft keinen Flex- oder Grid-Container erstellt, hat es keine Wirkung.

<integer>

Repräsentiert die ordinale Gruppe, die für das Element verwendet werden soll.

Die Verwendung der order-Eigenschaft führt zu einer Diskrepanz zwischen der visuellen Darstellung von Inhalten und der DOM-Reihenfolge. Dies wirkt sich nachteilig auf sehbehinderte Nutzer aus, die mit Unterstützungstechnologien wie einem Screenreader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, haben Ihre Nutzer je nach Zugangsweise unterschiedliche Erlebnisse.

• Flexbox & die Trennung von Tastaturnavigation über Tink (2016)
• Die Quellordnung ist wichtig über Adrian Roselli (2015)
• Verständnis von WCAG, Guideline 1.3 Erklärungen
• Verständnis von Erfolgskriterium 1.3.2 | W3C Understanding WCAG 2.0

order = 
  <integer>  

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; durch das Setzen von display auf flex wird das <main> Element zu einem Flex-Container. Standardmäßig erzeugt dies Flex-Elemente von gleicher vertikaler Größe. Die Seitenleisten erhalten beide eine absolute width, während das <article> allen positiven Freiraum mit einem durch die flex Kurzschreibweise gesetzten flex-grow-Faktor ausnutzt.

Wir setzen dann unterschiedliche Werte der order-Eigenschaft für jedes der drei Kinder des Flex-Containers; das bedeutet, dass das CSS die visuelle Reihenfolge dieser Komponenten definiert, statt dass sie in der im HTML deklarierten Reihenfolge erscheinen.

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 als erstes in der Quellreihenfolge, wird aber visuell in der Mitte dargestellt.

• Grundkonzepte von Flexbox
• Anordnen von Flex-Elementen
• CSS-Grid-Layout und Barrierefreiheit
• CSS display Modul
• Lesereihenfolge