CSS/Eigenschaften/Flexbox/order

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft order legt im Flexible Box Layout die Reihenfolge eines Flex Items unabhängig von ihrem Auftreten im Code fest.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Änderung der Reihenfolge mit order ansehen …
section {
  display: flex;
  justify-content: space-between;
}
 
.ausnahme {
  order: -1;
}

Im Beispiel werden in der zweiten und dritten Reihe jeweils einem Element die id ausnahme mit der Eigenschaft order: -1; zugewiesen, wodurch dieses im Elementfluss ganz nach vorne verschoben wird.

Folgende Angaben sind möglich:

  • Ganzzahlige Zahl: Standardwert ist 0. Sie können entweder eine Reihenfolge für alle Flex Items festlegen, oder ein Element mit einem negativen Wert order: -1; nach vorne positionieren.
  • initial
  • inherit
Beachten Sie: Die Anweisung, Elemente neu anzuordnen, bezieht sich nur auf die optische Darstellung. Die Reihenfolgen im Code oder im DOM werden davon nicht beeinflusst. Achten Sie daher immer darauf, dass sowohl die Reihenfolge im Code, als auch die Reihenfolge nach der Verschiebung Sinn ergibt. Besonderes Augenmerk sollten Sie auf die Tabulator-Reihenfolge legen, also: kann die Seite noch sinnvoll und nachvollziehbar mit der Tastatur bedient werden?