CSS order-Eigenschaft

Die order-Eigenschaft wird verwendet, um die Reihenfolge eines flexiblen Elements innerhalb des Flex- oder Grid-Containers festzulegen.

Die order-Eigenschaft ist Teil des Flexible Box Layout-Moduls.

Die order-Eigenschaft ist eine der CSS3-Eigenschaften.

INFO

Wenn das Element kein flexibles Element ist, funktioniert die order-Eigenschaft nicht.

Barrierefreiheitsaspekte

Die order-Eigenschaft erzeugt eine Trennung zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge. Die visuelle Neuanordnung ändert nicht die DOM-Reihenfolge, was die Navigation mit Screenreadern beeinträchtigt. Nutzer, die auf assistive Technologien (z. B. Screenreader) angewiesen sind, werden die ursprüngliche DOM-Reihenfolge und nicht das visuell neu angeordnete Layout erleben.

Anfangswert	0
Anwendbar auf	Flex-Elemente und Grid-Elemente.
Vererbbar	Nein.
Animierbar	Nein. Die order-Eigenschaft ist diskret und nicht animierbar.
Version	CSS3
DOM-Syntax	Object.style.order = "4";

Syntax

CSS order-Syntax

css

order: number | initial | inherit;

Beispiel für die order-Eigenschaft:

CSS order-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

Order property

Beispiel für die Anwendung der order-Eigenschaft auf die Container-Klasse:

CSS order Flexbox-Beispiel

html

<!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>

Try it Yourself »

In den oben genannten Beispielen definiert die order-Eigenschaft die Reihenfolge für Flex- oder Grid-Elemente. Gemäß der Benutzeranforderung wird jedem Element eine Nummer zugewiesen.

Werte

Wert	Beschreibung
number	Definiert die Reihenfolge für das Flex- oder Grid-Element im Container. Der Standardwert ist 0.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was macht die CSS-'order'-Eigenschaft?

Sie wird verwendet, um Flex-Elemente entlang der Hauptachse anzuordnen.Sie ermöglicht es einem Element, sich wie ein blockorientiertes Element zu verhalten.Sie wird verwendet, um die vertikale Ausrichtung eines Inline- oder Tabellenzell-Elements zu bestimmen.Sie legt die Reihenfolge des Erscheinens eines Elements innerhalb eines Containers fest.

CSS order-Eigenschaft ​

Barrierefreiheitsaspekte ​

Syntax ​

Beispiel für die order-Eigenschaft: ​

Ergebnis ​

Beispiel für die Anwendung der order-Eigenschaft auf die Container-Klasse: ​

Werte ​

Praxis ​