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: 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;
}

Im obigen Demo können Sie die Optionen auf der linken Seite auswählen, um den order-Wert der pinkfarbenen Box zu ändern. Die hellblauen Boxen haben feste order-Werte erhalten.

Berücksichtigen Sie den Effekt der Quellreihenfolge. Zum Beispiel, wenn order: 2; ausgewählt wird, wird die pinkfarbene Box vor den beiden blauen Boxen mit order: 2; platziert. Dies liegt daran, dass die pinkfarbene Box im Quellcode vor den blauen Boxen erscheint.

/* <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 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 ist, dessen übergeordnete display-Eigenschaft keinen Flex- oder Grid-Container erstellt, hat dies keine Wirkung.

<integer>

Repräsentiert die Ordnungsgruppe, die vom Element verwendet werden soll.

Die Verwendung der order-Eigenschaft führt zu einer Trennung zwischen der visuellen Darstellung von Inhalten und der DOM-Reihenfolge. Dies beeinträchtigt Benutzer mit eingeschränktem Sehvermögen, die mit Hilfe von unterstützender Technologie wie einem Screen Reader navigieren. Wenn die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, werden Ihre Benutzer unterschiedliche Erlebnisse haben, je nachdem, wie sie auf Ihre Inhalte zugreifen.

• Flexbox & the keyboard navigation disconnect via Tink (2016)
• Source Order Matters via Adrian Roselli (2015)
• Erklärung zu WCAG, Richtlinie 1.3
• Erklärung zum Erfolgskriterium 1.3.2 | W3C Understanding WCAG 2.0

order = 
  <integer>  

In diesem Beispiel erstellen wir ein klassisches Zwei-Sidebar-Layout.

HTML

Wir fügen eine Kopfzeile, eine Fußzeile und einen Hauptinhaltsbereich 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 stylen den Hauptbereich mit den Funktionen des flexiblen Box-Layouts-Moduls; 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. Den Sidebars wird eine absolute width zugewiesen, während der <article> mit einem flex-grow-Faktor, der über die flex-Kurzform festgelegt wird, den gesamten positiven freien Raum einnimmt.

Wir setzen dann unterschiedliche order-Werte für jedes der drei Kinder des Flex-Containers; dies 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

Der <article> erscheint zuerst in der Quellreihenfolge, wird jedoch visuell in der Mitte dargestellt.

• Grundlegende Konzepte von Flexbox
• Flex-Elemente anordnen
• CSS Grid-Layout und Barrierefreiheit
• CSS Display Modul