Reihenfolge von Flex-Elementen

Layout-Methoden wie Flexbox und Grid ermöglichen die Kontrolle über die Reihenfolge von Inhalten. In diesem Artikel betrachten wir Möglichkeiten, wie Sie die visuelle Reihenfolge Ihrer Inhalte mit Flexbox ändern können. Wir werden auch berücksichtigen, wie das Umordnen von Elementen die Barrierefreiheit beeinflusst.

Umkehren der Anzeige der Elemente

Die Eigenschaft flex-direction kann einen von vier Werten annehmen:

  • row
  • column
  • row-reverse
  • column-reverse

Die ersten beiden Werte halten die Reihenfolge der Elemente so, wie sie in der Dokumentenquellreihenfolge erscheinen, und zeigen sie sequentiell von der Startlinie an.

Die Elemente werden in einer Zeile angezeigt, beginnend von links.

Die Elemente werden als Spalte angezeigt, beginnend von oben.

Die zweiten beiden Werte kehren die Elemente um, indem sie die Start- und Endlinien vertauschen.

Die Elemente werden in umgekehrter Reihenfolge angezeigt, beginnend von der rechten Linie.

Die Elemente werden in einer Spalte in umgekehrter Reihenfolge angezeigt, beginnend an der unteren Linie.

Denken Sie daran, dass sich die Startlinie auf die Schreibmodi bezieht. Die oben genannten reihenbezogenen Beispiele zeigen, wie row und row-reverse in einer von links nach rechts verlaufenden Sprache wie Englisch funktionieren. Wenn Sie in einer von rechts nach links verlaufenden Sprache wie Arabisch arbeiten, würde row rechts beginnen, row-reverse links.

Flex-Container mit arabischen Buchstaben, die zeigen, wie die Reihenfolge der Zeile von rechts beginnt und die Reihenfolge row-reverse von links.

Dies mag wie eine einfache Möglichkeit erscheinen, Dinge in umgekehrter Reihenfolge anzuzeigen. Sie sollten jedoch beachten, dass die Elemente nur visuell in umgekehrter Reihenfolge angezeigt werden. Die Umordnungsmöglichkeiten des Flex-Layouts betreffen nur die visuelle Darstellung. Die Tab-Reihenfolge und die Reihenfolge der Sprachausgabe folgen der Quellcode-Reihenfolge. Das bedeutet, dass sich nur die visuelle Darstellung ändert; die Quellreihenfolge bleibt gleich und bietet ein anderes Benutzererlebnis für nicht-CSS-UAs (wie Siri oder Alexa) und Benutzer von Hilfstechnologien. Wenn Sie die Reihenfolge einer Navigationsleiste ändern, bleibt die Tab-Reihenfolge die Dokumentenquellreihenfolge und nicht Ihre visuelle Reihenfolge, was kognitiv verwirrend sein kann.

Wenn Sie einen umgekehrten Wert nutzen oder Ihre Elemente anderweitig umordnen, sollten Sie in Betracht ziehen, ob Sie die logische Reihenfolge in der Quelle wirklich ändern sollten.

Die Spezifikation des flexiblen Boxlayouts warnt davor, das Umordnen nicht als Lösung für Quellenprobleme einzusetzen:

"Autoren dürfen nicht order oder die *-reverse Werte von flex-flow/flex-direction als Ersatz für die korrekte Quellreihenfolge verwenden, da dies die Zugänglichkeit des Dokuments ruinieren kann."

Während Sie von Link zu Link im Live-Beispiel unten tabben, wird der Fokusstil hervorgehoben, der zeigt, dass das Ändern der Reihenfolge von Flex-Elementen mit flex-direction die Tab-Reihenfolge nicht ändert, die weiterhin der Quellcode-Reihenfolge folgt.

Ebenso wie das Ändern des Werts von flex-direction die Tab-Reihenfolge nicht ändert, ändert das Ändern dieses Wertes nicht die Malreihenfolge. Es ist lediglich eine visuelle Umkehrung der Elemente.

Die order-Eigenschaft

Zusätzlich zur Umkehrung der Reihenfolge, in der Flex-Elemente visuell angezeigt werden, können Sie mit der Eigenschaft order gezielt einzelne Elemente ansteuern und ändern, wo sie in der visuellen Reihenfolge erscheinen.

Die Eigenschaft order ist dazu gedacht, die Elemente in ordinale Gruppen anzuordnen. Das bedeutet, dass die Elemente einer Ganzzahl zugewiesen werden, die ihre Gruppe repräsentiert. Die Elemente werden dann gemäß dieser Ganzzahl, mit den niedrigsten Werten zuerst, in der visuellen Reihenfolge platziert. Wenn mehr als ein Element denselben Ganzzahlwert hat, werden die Elemente innerhalb dieser Gruppe gemäß der Quellreihenfolge angeordnet.

Als Beispiel werden fünf Flex-Elementen die folgenden order-Werte zugewiesen:

  • Quell-Element 1: order: 2
  • Quell-Element 2: order: 3
  • Quell-Element 3: order: 1
  • Quell-Element 4: order: 3
  • Quell-Element 5: order: 1

Diese Elemente würden in folgender Reihenfolge auf der Seite angezeigt werden:

  • Quell-Element 3: order: 1
  • Quell-Element 5: order: 1
  • Quell-Element 1: order: 2
  • Quell-Element 2: order: 3
  • Quell-Element 4: order: 3

Die Elemente haben eine Zahl, die ihre Quellreihenfolge zeigt, die umgeordnet wurde.

Experimentieren Sie mit den Werten im Live-Beispiel unten und sehen Sie, wie sich die Reihenfolge ändert. Versuchen Sie auch flex-direction auf row-reverse zu ändern und sehen Sie, was passiert — die Startlinie wird gewechselt, sodass die Ordnung von der gegenüberliegenden Seite beginnt.

Flex-Elemente haben einen Standardwert order von 0. Daher werden Elemente mit einem ganzzahligen Wert größer als 0 nach allen Elementen angezeigt, die keinen expliziten order-Wert erhalten haben.

Sie können auch negative Werte mit order verwenden, was ziemlich nützlich sein kann. Wenn Sie ein Element zuerst anzeigen möchten und die Reihenfolge aller anderen Elemente unverändert lassen möchten, können Sie diesem Element den order-Wert -1 geben. Da dies niedriger als 0 ist, wird das Element immer zuerst angezeigt.

Im Live-Code-Beispiel unten werden die Elemente mit Flexbox angeordnet. Indem Sie ändern, welchem Element die Klasse active im HTML zugewiesen ist, können Sie ändern, welches Element zuerst angezeigt wird und somit die volle Breite oben im Layout einnimmt, während die anderen Elemente darunter angezeigt werden.

Die Elemente werden in order-modifizierter Dokumentenreihenfolge angezeigt, was bedeutet, dass der Wert der order-Eigenschaft berücksichtigt wird, bevor die Elemente angezeigt werden.

Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem niedrigeren Wert für order werden zuerst gemalt und Elemente mit einem höheren Wert für order danach.

Die order-Eigenschaft und Barrierefreiheit

Die Verwendung der order-Eigenschaft hat die gleichen Auswirkungen auf die Barrierefreiheit wie die Änderung der Richtung mit flex-direction. Die Verwendung von order ändert die Reihenfolge, in der die Elemente gemalt werden, und die Reihenfolge, in der sie visuell erscheinen. Sie ändert nicht die sequentielle Navigationsreihenfolge der Elemente. Daher kann ein Benutzer, der die Tastatur verwendet, um durch den Inhalt auf der Seite zu tabben, sich verwirrt fühlen, da er möglicherweise durch Ihren Inhalt springt.

Durch Tabben durch eines der Live-Beispiele auf dieser Seite können Sie sehen, wie order potenziell eine merkwürdige Erfahrung für jeden schafft, der kein Zeigegerät wie eine Maus verwendet. Lesen Sie mehr über diese Trennung von visueller Reihenfolge und logischer Reihenfolge und einige der potenziellen Probleme, die sie für die Barrierefreiheit aufwirft, in den folgenden Ressourcen.

Anwendungsfälle für order

Es gibt einige Anwendungsfälle, für die die Tatsache, dass die logische und damit die Lesereihenfolge von Flex-Elementen von der visuellen Reihenfolge getrennt ist, hilfreich ist. Sorgfältig eingesetzt, kann die order-Eigenschaft es ermöglichen, einige nützliche gängige Muster einfach zu implementieren.

Vielleicht haben Sie ein Design, vielleicht eine Karte, die einen Nachrichtenartikel anzeigt. Die Überschrift des Nachrichtenartikels ist das wichtigste Element, das hervorgehoben werden soll und das Element, zu dem ein Benutzer springen könnte, wenn er zwischen Überschriften wechselt, um den gewünschten Inhalt zu finden. Die Karte hat auch ein Datum; das fertige Design, das wir erstellen möchten, sieht etwa so aus.

Ein Designbaustein mit einem Datum, dann einer Überschrift und dann Inhalt.

Visuell erscheint das Datum über der Überschrift, in der Quelle jedoch. Wenn die Karte von einem Screenreader vorgelesen würde, würde ich bevorzugen, dass der Titel zuerst und dann das Veröffentlichungsdatum angekündigt würde. Dies können wir mit der order-Eigenschaft erreichen.

Die Karte ist unser Flex-Container, mit flex-direction auf column gesetzt. Wir geben dem Datum eine order von -1, wodurch es über der Überschrift platziert wird.

Diese kleinen Anpassungen sind die Art von Fällen, in denen die order-Eigenschaft sinnvoll ist. Halten Sie die logische Reihenfolge identisch mit der Lese- und Tabulatorreihenfolge des Dokuments und bewahren Sie diese auf die zugänglichste und strukturierte Weise. Verwenden Sie dann order für rein visuelle Design-Anpassungen. Ordnen Sie keine Elemente um, die den Tastaturfokus erhalten. Stellen Sie sicher, dass Sie Ihren Inhalt immer nur mit einer Tastatur und nicht mit einer Maus oder einem Touchscreen testen; dies wird aufzeigen, ob Ihre Entwicklungsentscheidungen die Navigation durch den Inhalt komplexer machen.

Siehe auch