Anordnung von Flex-Elementen

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

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

Die ersten beiden Werte behalten die Elemente in der gleichen Reihenfolge, in der sie in der Dokumentenquelle erscheinen, und zeigen sie nacheinander von der Startlinie an.

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

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

Dies kann wie eine einfache Möglichkeit erscheinen, Dinge in umgekehrter Reihenfolge anzuzeigen. Sie sollten jedoch bedenken, dass die Elemente nur visuell in umgekehrter Reihenfolge angezeigt werden. Die Umordnungsfähigkeiten des Flex-Layouts betreffen nur die visuelle Darstellung. Die Tab-Reihenfolge und Sprachausgabe folgen der Reihenfolge des Quellcodes. Das bedeutet, dass nur die visuelle Darstellung sich ändert; die Quellenreihenfolge bleibt gleich und bietet ein anderes Benutzererlebnis für nicht-CSS-Benutzeragenten (denken Sie an Siri oder Alexa) und Benutzer von unterstützender Technologie. Wenn Sie die Reihenfolge einer Navigationsleiste ändern, bleibt die Tab-Reihenfolge die Dokumentenquellenreihenfolge, nicht Ihre visuelle Reihenfolge, was kognitiv verwirrend sein kann.

Wenn Sie einen umgekehrten Wert verwenden oder die Anordnung Ihrer Elemente anders ändern, sollten Sie überlegen, ob Sie wirklich die logische Reihenfolge in der Quelle ändern sollten.

Die Flexbox-Spezifikation warnt uns davor, das Umordnen als Mittel zum Beheben von Quellproblemen zu verwenden:

"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 beeinträchtigen kann."

Wenn Sie im folgenden Live-Beispiel von Link zu Link springen, 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.

<div class="box">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box > * a:focus {
  background-color: yellow;
  color: black;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: row-reverse;
}

Ebenso wie das Ändern des Wertes von flex-direction die Tab-Reihenfolge nicht ändert, ändert dieser Wert auch nicht die Zeichenreihenfolge. Es ist nur eine visuelle Umkehrung der Elemente.

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

Die Eigenschaft order ist dafür konzipiert, die Elemente in ordinalen Gruppen anzuordnen. Das bedeutet, dass die Elemente einer Ganzzahl zugewiesen werden, die ihre Gruppe darstellt. Die Elemente werden dann in der visuellen Reihenfolge entsprechend dieser Ganzzahl angezeigt, beginnend mit den niedrigsten Werten. Wenn mehr als ein Element denselben Ganzzahlwert hat, werden die Elemente innerhalb dieser Gruppe entsprechend der Quellreihenfolge angeordnet.

Als Beispiel werden fünf Flex-Elementen folgende 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 auf der Seite in folgender Reihenfolge angezeigt:

• 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

Experimentieren Sie mit den Werten in diesem 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 vertauscht, sodass die Anordnung von der gegenüberliegenden Seite beginnt.

<div class="box">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div><a href="#">3</a></div>
  <div><a href="#">4</a></div>
  <div><a href="#">5</a></div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) {
  order: 2;
}
.box :nth-child(2) {
  order: 3;
}
.box :nth-child(3) {
  order: 1;
}
.box :nth-child(4) {
  order: 3;
}
.box :nth-child(5) {
  order: 1;
}

Flex-Elemente haben einen Standardwert von order von 0. Daher werden Elemente mit einem ganzzahligen Wert größer als 0 nach allen Elementen angezeigt, denen kein expliziter order-Wert zugewiesen wurde.

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

Im folgenden Live-Code-Beispiel werden die Elemente mit Flexbox angeordnet. Indem Sie ändern, welches Element in dem HTML die Klasse active zugewiesen bekommt, können Sie ändern, welches Element zuerst angezeigt wird und daher in voller Breite oben im Layout erscheint, während die anderen Elemente darunter angezeigt werden.

<div class="box">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div class="active"><a href="#">3</a></div>
  <div><a href="#">4</a></div>
  <div><a href="#">5</a></div>
</div>

* {
  box-sizing: border-box;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.active {
  order: -1;
  flex: 1 0 100%;
}

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

Order ändert auch die Zeichenreihenfolge der Elemente; Elemente mit einem niedrigeren Wert für order werden zuerst gezeichnet und Elemente mit einem höheren Wert für order anschließend gezeichnet.

Die Nutzung der order-Eigenschaft hat dieselben Implikationen für die Zugänglichkeit wie das Ändern der Richtung mit flex-direction. Die Nutzung von order ändert die Reihenfolge, in der Elemente gezeichnet werden, und die Reihenfolge, in der sie visuell erscheinen. Sie ändert jedoch nicht die sequentielle Navigationsreihenfolge der Elemente. Wenn ein Benutzer also eine Tastatur verwendet, um durch die Inhalte auf der Seite zu springen, könnte er feststellen, dass er sich in einer sehr verwirrenden Weise durch die Inhalte bewegt.

Indem Sie in irgendeinem der Live-Beispiele auf dieser Seite herumspringen, können Sie sehen, wie order potenziell eine seltsame Erfahrung für jeden schafft, der kein Zeigegerät wie eine Maus verwendet. Um mehr über diesen Konflikt zwischen visueller und logischer Ordnung und einige der potenziellen Probleme, die er für die Barrierefreiheit aufwirft, zu erfahren, siehe die folgenden Ressourcen.

• Flexbox und die Trennung von Tastaturnavigation über tink.uk (2016)
• HTML-Quellreihenfolge vs. CSS-Anzeigereihenfolge über adrianroselli.com (2015)
• Der responsive Ordnungs-Konflikt bei Tastaturfokus über alastairc.uk (2017)

Es gibt einige Anwendungsfälle, bei denen es von Vorteil ist, dass die logische und damit die Lesereihenfolge von Flex-Elementen von der visuellen Reihenfolge getrennt ist. Bei sorgfältiger Anwendung kann die order-Eigenschaft es ermöglichen, einige nützliche Muster einfach zu implementieren.

Sie könnten ein Design haben, vielleicht eine Karte, die einen Nachrichtenartikel anzeigt. Die Überschrift des Nachrichtenartikels ist das Hauptelement, das hervorgehoben werden sollte, und wäre das Element, zu dem ein Benutzer springen könnte, wenn er zwischen Überschriften navigiert, um den gewünschten Inhalt zu finden. Die Karte hat auch ein Datum; das endgültige Design, das wir erstellen möchten, sieht folgendermaßen aus.

Visuell erscheint das Datum oberhalb der Überschrift, in der Quelle. Wenn die Karte jedoch von einem Screenreader vorgelesen wird, hätte ich lieber, dass der Titel zuerst und dann das Veröffentlichungsdatum angesagt wird. 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, um es oberhalb der Überschrift zu platzieren.

<div class="wrapper">
  <div class="card">
    <h3>News item title</h3>
    <div class="date">1 Nov 2017</div>
    <p>This is the content of my news item. Very newsworthy.</p>
  </div>
  <div class="card">
    <h3>Another title</h3>
    <div class="date">6 Nov 2017</div>
    <p>This is the content of my news item. Very newsworthy.</p>
  </div>
</div>

body {
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  flex: 1 1 200px;
  gap: 1em;
}

.card {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
  display: flex;
  flex-direction: column;
}

.date {
  order: -1;
  text-align: right;
}

Diese kleinen Anpassungen sind die Art von Fällen, in denen die order-Eigenschaft sinnvoll ist. Halten Sie die logische Reihenfolge gleich der Lese- und Tab-Reihenfolge des Dokuments und bewahren Sie diese auf die zugänglichste und strukturierteste Weise. Verwenden Sie dann order für rein visuelle Designanpassungen. Ordnen Sie keine Elemente um, die Tastaturfokus erhalten. Stellen Sie sicher, dass Sie Ihre Inhalte immer nur mit einer Tastatur anstelle einer Maus oder eines Touchscreens testen, dies wird aufdecken, ob Ihre Entwicklungsentscheidungen das Navigieren der Inhalte verkomplizieren.

• Grundkonzepte von Flexbox
• Beziehung von Flexbox zu anderen Layout-Methoden
• Ausrichten von Elementen in einem Flex-Container
• Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Meisterung des Umbruchs von Flex-Elementen
• Typische Anwendungsfälle von Flexbox
• CSS-Flexbox-Layout Modul