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 Reihenfolge 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 macht. Besonderes Augenmerk sollten Sie auf die Tabulator-Reihenfolge legen, also: kann die Seite noch sinnvoll und nachvollziehbar mit der Tastatur bedient werden? Als einziger Browser hat der Firefox die Reihenfolge des Tabindex an die Neuanordnung angepasst. Dieses Verhalten wird aber als Bug 812687 geführt, der zu beheben ist.[1]

Quellen[Bearbeiten]

  1. bugzilla: Bug 812687