CSS order-Eigenschaft

Die Eigenschaft order steuert die Position eines Flex-Items oder Grid-Items entlang seiner Spur und ermöglicht es, die visuelle Reihenfolge von Elementen zu ändern, ohne ihre Reihenfolge im HTML zu verändern. Sie ist Teil des Flexible Box Layout-Moduls und gehört zu den CSS3-Eigenschaften.

Standardmäßig hat jedes Element order: 0, sodass die Elemente in der Quellreihenfolge erscheinen. Die Elemente werden nach aufsteigendem order-Wert angeordnet; Elemente mit demselben order-Wert behalten ihre Quellreihenfolge relativ zueinander bei. Dies macht order nützlich für Aufgaben wie das Verschieben einer Seitenleiste vor den Hauptinhalt auf breiten Bildschirmen oder das Umsortieren von Karten innerhalb eines Flexbox- oder CSS Grid-Layouts, ohne das Markup zu verändern.

Info

order wirkt sich nur auf direkte Kinder eines Flex- oder Grid-Containers aus. Ist das Element kein Flex-Item oder Grid-Item, hat order keine Wirkung.

Wie Werte funktionieren

order akzeptiert jeden ganzzahligen Wert, einschließlich negativer Werte:

Ein Element mit einem niedrigeren order-Wert erscheint zuerst; ein höherer order-Wert erscheint später.
Da der Ausgangswert 0 ist, ist das Setzen eines Elements auf -1 ein schneller Weg, es vor alle anderen zu verschieben.
Elemente mit demselben order-Wert fallen auf ihre DOM-Reihenfolge zurück, sodass in der Regel nur der order-Wert der wenigen Elemente gesetzt werden muss, die verschoben werden sollen.

.first  { order: -1; } /* moves before all default (0) items */
.middle { order:  0; } /* default, can be omitted */
.last   { order:  1; } /* moves after all default items */

Barrierefreiheit

order erzeugt eine Diskrepanz zwischen der visuellen Darstellung des Inhalts und seiner DOM-Reihenfolge. Das visuelle Umsortieren ändert nicht den DOM, daher ändert es auch nicht die Lesereihenfolge für Screenreader oder die Tab-Reihenfolge für Tastaturbenutzer. Jemand, der mit der Tabulatortaste durch die Seite navigiert oder einen Screenreader verwendet, folgt der ursprünglichen Quellreihenfolge, nicht dem umgeordneten Layout — was verwirrend sein kann, wenn beide erheblich voneinander abweichen. Halten Sie den DOM in einer logischen Lesereihenfolge und verwenden Sie order nur für gestalterische Anpassungen.

Ausgangswert	0
Gilt für	Flex-Items und Grid-Items.
Vererbt	Nein.
Animierbar	Nein. Die order-Eigenschaft ist diskret und nicht animierbar.
Version	CSS3
DOM-Syntax	Object.style.order = "4";

Syntax

CSS order-Syntax

order: number | initial | inherit;

Beispiel der order-Eigenschaft:

CSS order Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der order-Eigenschaft angewendet auf die Container-Klasse:

CSS order Flexbox-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>

Probier es selbst »

In beiden Beispielen ordnet die Eigenschaft order die Elemente auf dem Bildschirm um, während das HTML in seiner ursprünglichen Reihenfolge bleibt — jedem Element wird lediglich die Zahl zugewiesen, die es an die gewünschte Position platziert.

order ist eines von mehreren Flexbox-Ausrichtungswerkzeugen. Kombinieren Sie es mit flex-direction, um die Hauptachse festzulegen, mit justify-content, um Elemente entlang dieser Achse zu verteilen, und mit align-items, um sie auf der Querachse auszurichten.

Werte

Wert	Beschreibung
number	Legt die Reihenfolge des Flex- oder Grid-Items im Container fest. Der Standardwert ist 0.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was macht die CSS-Eigenschaft 'order'?

Sie wird verwendet, um Flex-Items entlang der Hauptachse anzuordnen.Sie lässt ein Element wie ein Block-Level-Element verhalten.Sie gibt die vertikale Ausrichtung einer Inline- oder Tabellenzellen-Box an.Sie legt die Reihenfolge des Erscheinens eines Elements innerhalb eines Containers fest.