CSS-Kurs / Flexbox-Grundlagen: Container, Elemente und Achsen

Flexbox legt die direkten Kindelemente eines Containers entlang einer Hauptachse an und verteilt den Raum entlang dieser Achse. flex-direction wählt die Richtung der Hauptachse, während die Querachse senkrecht dazu verläuft; row bedeutet nicht unter allen Schreibrichtungen horizontal.

Wählen Sie einen Flexbox-Container und seine Elemente

Flexbox eignet sich für eindimensionale Beziehungen wie Navigationselemente, ein Suchfeld neben einer Schaltfläche oder ein Symbol neben einer Beschreibung. Das Einfügen von Abstand durch wiederholtes Leerzeichen oder unabhängig positionierte Elemente ist anfällig, da sich der Inhalt und die verfügbare Breite ändern. Flexbox verteilt den verfügbaren Platz eines Containers auf seine direkten Kinder.

Wenn Sie ein Raster benötigen, das Zeilen und Spalten gleichzeitig konsistent ausrichtet, sehen Sie sich Grid an. Flexbox kann auch in mehrere Zeilen aufgeteilt werden, aber jede Zeile verteilt den Platz separat, sodass die Spalten in der ersten Zeile nicht immer den Spalten in der zweiten Zeile entsprechen. Ein großer Bereich der Seite kann zusammen als Grid verwendet werden, und eine Sammlung von Schaltflächen darin kann zusammen wie eine Flexbox verwendet werden. Um mehrere Zeilen und Spalten zusammen auszurichten, vergleichen Sie Grid-Grundlagen: Tracks, Linien und Platzierung, das Zeilen und Spalten zusammen erstellt.

.menu {
  display: flex;
  gap: 12px;
}

Diese Deklaration ist kein Befehl, um .menu selbst innerhalb seines Elternteils zu sortieren. Dies ist ein Befehl, um Kinder direkt in .menu zu sortieren. Zum Beispiel, wenn Sie zwei Divs innerhalb eines .menu haben und zwei Spans im ersten Div, sind die Flex-Elemente zwei Divs. Wenn Sie die Spans horizontal anordnen möchten, müssen Sie auch ein separates display: flex in diesem Div angeben.

Bestimmen Sie die Haupt- und Querachse

Die Hauptachse ist die Richtung, in der Flex-Elemente aufgelistet werden, und die Querachse ist die Richtung, die senkrecht zur Hauptachse steht. Anstatt sich zu merken, welche Eigenschaft die Breite oder Höhe kontrolliert, müssen Sie verstehen, welche Achse sie kontrolliert, damit Sie sie genau ausrichten können, selbst wenn Sie sie in eine Spalte ändern.

Die Anweisungen in dieser Tabelle gehen von writing-mode: horizontal-tb und direction: ltr aus. Bei rechts-nach-links- oder vertikalem Schreiben ändern sich die physischen Richtungen. row folgt der Inline-Richtung, daher beginnt es nicht immer links. Für weitere Details siehe die MDN-Grundlagen zu Flexbox und Schreibrichtung überprüfen.

Verstehen Sie das anfängliche Flexbox-Verhalten

Wenn kein separater Wert angegeben ist, ist die Richtung row und der Zeilenumbruch ist nowrap. Elemente werden am Anfang der Hauptachse gruppiert und dehnen sich nicht automatisch entlang der Hauptachse aus, um den zusätzlichen Platz zu füllen. Sie können schrumpfen, wenn nicht genügend Platz vorhanden ist, aber wenn sie aufgrund der Mindestgröße des Inhalts oder festgelegter Einschränkungen nicht ausreichend schrumpfen können, können sie über den Elternelement hinaus überlaufen. Detaillierte Steuerung der Ausrichtung, Zeilenumbrüche und Elementgröße wird in Flexbox-Ausrichtung, Umbruch, gap, grow und shrink fortgesetzt.

Auf der Querachse ist stretch das Standardausrichtungsverhalten. Elemente mit automatischer Höhe in einer Reihe füllen normalerweise die gleiche Reihenhöhe. Deshalb erscheinen kurze Beschreibungskarten genauso hoch wie lange Beschreibungskarten. Gehen Sie nicht davon aus, dass Elemente, die bereits eine feste Höhe oder automatische Außenabstände haben, automatisch gestreckt werden. In einer Spalte ist die Querachse horizontal, sodass die Breite zunimmt.

Die anfängliche Größenänderung eines Elements kann als flex: 0 1 auto verstanden werden. 0 bedeutet, dass es nicht durch die verbleibende Fläche vergrößert wird, 1 bedeutet, dass es bei unzureichendem Platz an der Verringerung teilnimmt, und auto bedeutet, dass die Größenspezifikation und der Inhalt der entsprechenden Hauptachse als Grundlage verwendet werden. In dieser Phase werden zunächst die Platzierungsrichtung und der grundlegende Ablauf überprüft, und die Praxis der Anpassung des Verhältnisses und von Zeilenumbrüchen wird ausführlich in der Lektion zur Ausrichtung und Größenanpassung behandelt.

Vergleichen Sie den normalen Ablauf und die Flexbox-Richtungen

Speichern Sie den unten stehenden Code als UTF-8-Datei flex-direction.html und öffnen Sie ihn in Ihrem Browser. Es werden keine separaten Bibliotheken benötigt. Alle Links werden in der Reihenfolge erster, zweiter, dritter geschrieben, und nur das CSS ist unterschiedlich. Der Abschnitt allgemeines Layout gibt Links als Blöcke an und zeigt sie Zeile für Zeile.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. Stellen Sie im Zeilenabschnitt sicher, dass die drei Elemente auf derselben Linie sind. Fügen Sie einfach flex-direction: column zu .row hinzu, um es vertikal zu ändern. Nach der Bestätigung entfernen Sie die Deklaration und stellen es wieder auf die ursprüngliche Zeile zurück.
2. Beachten Sie, wie sich die Links im Spaltenabschnitt horizontal verbreitern. Das Hinzufügen von align-items: flex-start zu .column bringt den Link näher an die Breite des Inhalts. Dies liegt daran, dass die Querachse der Spalte horizontal ist. Nach dem Vergleich entfernen Sie die hinzugefügte Deklaration.
3. Im Bereich row-reverse erscheint die erste Link rechts, aber HTML hat immer noch die erste Link zuerst. Drücken Sie die Tabulatortaste, um sicherzustellen, dass Sie in der HTML-Reihenfolge First → Second → Third wechseln. Ändern Sie nicht die wichtige Lesereihenfolge nur durch Umkehr, da sich die linke-rechte Reihenfolge auf dem Bildschirm und die Tastaturnavigationsreihenfolge ändern können.
4. In verschachtelten Kinderbereichen werden nur die großen Boxen A und B nebeneinander platziert. Die beiden spans in A stehen untereinander. Ergänzen Sie display: flex in der Regel .nested > div, um auch deren innere Anordnung zu verändern. Entfernen Sie die hinzugefügte Deklaration nach der Überprüfung.
5. Im letzten Abschnitt stellen Sie sicher, dass die drei Karten die gleiche Höhe haben und dass sie auf großen Bildschirmen nicht die gesamte verbleibende Breite ausfüllen. Beim Verkleinern des Bildschirms wird die Kartenbreite reduziert, ohne dass Zeilenumbrüche erfolgen. Wenn Sie flex-shrink: 0 zu .initial > div hinzufügen, wird es nicht schrumpfen, was zu horizontalem Überlauf führt. Entfernen Sie die hinzugefügte Deklaration nach der Überprüfung.

Diagnostizieren Sie unerwartete Layout-Ergebnisse

Wählen Sie in den Entwicklertools das tatsächliche übergeordnete Element aus, nicht das Kind, das Sie sortieren möchten, und überprüfen Sie den angewendeten Wert von display. Prüfen Sie anschließend flex-direction, width, height und min-width und margin des Kindes. Wenn das Flex durch eine andere Regel abgedeckt wird oder das Sortierziel eine Ebene tiefer liegt, werden Sie nicht die erwarteten Ergebnisse erhalten.

Zeilenumbrüche unterscheiden sich vom Ändern von Reihen und Spalten. In einer Situation, in der eine horizontale Linie überläuft, müssen Sie zuerst entscheiden, ob die Spalte geeignet ist und ob flex-wrap erforderlich ist, um mehrere Reihen beizubehalten. Wenn auf Mobilgeräten Inhalte ausgeblendet sind, überprüfen Sie die Mindestgröße, bis zu der die Elemente schrumpfen dürfen und die Lesereihenfolge, bevor Sie sie mit overflow: hidden ausblenden. Temporäre Änderungen in den Entwicklertools können durch ein Aktualisieren rückgängig gemacht werden, und wenn Sie eine Datei geändert haben, müssen Sie alle gespeicherten Werte selbst wiederherstellen.