Die zwei Achsen

Flexbox hat den Ruf, kompliziert zu sein. Das liegt an genau einer Sache: es gibt vier Eigenschaften, die aussehen, als täten sie dasselbe, und welche davon greift, hängt von einer Angabe ab, die man leicht übersieht.

Diese Lektion räumt das aus dem Weg, bevor die erste Eigenschaft drankommt. Sie ist die kürzeste des Abschnitts und die, auf die sich alle folgenden berufen.

01 / 04Eine Angabe am Container

<div class="ohne">
  <div class="kasten">eins</div>
  <div class="kasten">zwei</div>
  <div class="kasten">drei</div>
</div>

<div class="mit">
  <div class="kasten">eins</div>
  <div class="kasten">zwei</div>
  <div class="kasten">drei</div>
</div>

body {
  font-family: system-ui, sans-serif;
}

.ohne,
.mit {
  margin-bottom: 24px;
  padding: 12px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 12px;
  background-color: #dbeafe;
}

/* Eine einzige Angabe, und zwar am Container.
   An den Kästen ändert sich nichts. */
.mit {
  display: flex;
}

display: flex steht am Container, nicht an den Kindern. Das ist der erste Punkt, an dem man sich vertut, und er ist wichtig genug, um ihn zweimal zu lesen: Du sagst dem Elternteil, dass es seine Kinder verteilen soll. Die Kinder selbst bekommen nichts.

Was danach passiert, sieht nach mehr aus als nach einer Zeile. Die drei Kästen im Beispiel sind div, also Block-Elemente, und Block-Elemente stapeln sich normalerweise von oben nach unten. Sobald ihr Elternteil ein Flex-Container ist, verlieren sie diesen Block-Charakter und stehen nebeneinander. Niemand hat inline-block geschrieben, niemand hat eine Breite gesetzt.

Der Container selbst bleibt dabei ein Block. Er nimmt weiterhin die volle Breite und stapelt sich mit dem, was über und unter ihm liegt. Nach innen ändert sich alles, nach außen nichts. Wenn du auch das ändern willst, gibt es display: inline-flex, aber das brauchst du selten.

02 / 04Genau eine Ebene tief

<div class="reihe">
  <div class="kasten">direktes Kind</div>
  <div class="kasten">direktes Kind</div>

  <div class="kasten huelle">
    <p>Enkel</p>
    <p>Enkel</p>
  </div>
</div>

body {
  font-family: system-ui, sans-serif;
}

.reihe {
  display: flex;
  padding: 12px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 12px;
  background-color: #dbeafe;
}

/* Die drei Kästen stehen nebeneinander, weil sie
   direkte Kinder sind. Die beiden Absätze im dritten
   Kasten stapeln weiter, denn ihr Elternteil ist
   kein Flex-Container. */
.huelle {
  background-color: #fef9c3;
}

.huelle p {
  margin: 0;
  padding: 4px;
  background-color: #fde68a;
}

Der zweite Punkt ist der, an dem später die Fehlersuche hängt: Flex-Items sind ausschließlich die direkten Kinder. Was eine Ebene tiefer liegt, merkt von der ganzen Sache nichts.

Im Beispiel stehen drei Kästen nebeneinander, weil sie direkte Kinder sind. Der dritte enthält zwei Absätze, und die stapeln sich weiter untereinander, denn ihr Elternteil ist ein ganz normaler Block. Willst du auch die nebeneinander haben, brauchst du dort ein zweites display: flex.

Das klingt umständlich, ist aber der Grund, warum verschachtelte Layouts mit Flexbox überhaupt funktionieren. Jeder Container verteilt nur seine eigenen Kinder, und niemand redet einer fremden Ebene hinein. In Lektion 9.7 baust du genau das: außen die Kopfzeile mit zwei Blöcken, innen die Navigationsliste mit ihren Links.

03 / 04Hauptachse und Querachse

<p class="titel">flex-direction: row</p>
<div class="reihe waagerecht">
  <div class="kasten">eins</div>
  <div class="kasten">zwei</div>
</div>

<p class="titel">flex-direction: column</p>
<div class="reihe senkrecht">
  <div class="kasten">eins</div>
  <div class="kasten">zwei</div>
</div>

body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.reihe {
  display: flex;
  justify-content: space-between;
  height: 120px;
  margin-bottom: 24px;
  padding: 12px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 12px;
  background-color: #dbeafe;
}

/* Dieselbe Angabe justify-content: space-between in
   beiden Kästen. Oben schiebt sie die Kinder nach
   links und rechts, unten nach oben und unten.
   Geändert hat sich nur die Richtung. */
.waagerecht {
  flex-direction: row;
}

.senkrecht {
  flex-direction: column;
}

Und jetzt der Satz, um den es in dieser Lektion geht.

Ein Flex-Container hat zwei Achsen. Die Hauptachse ist die Richtung, in der die Items aufgereiht werden. Standardmäßig läuft sie von links nach rechts, weil flex-direction: row der Standardwert ist. Die Querachse steht immer senkrecht darauf, in diesem Fall also von oben nach unten.

Wenn du flex-direction: column setzt, tauschen die beiden ihre Richtung: die Hauptachse läuft nach unten, die Querachse nach rechts.

Warum das so wichtig ist, siehst du im Beispiel. In beiden Kästen steht dieselbe Angabe justify-content: space-between. Oben schiebt sie die Kinder an den linken und rechten Rand, unten an den oberen und unteren. Die Eigenschaft hat sich nicht geändert, nur die Achse, auf der sie arbeitet.

Das ist die Stelle, an der der Inspector in diesem Abschnitt anfängt zu tragen. Sobald du auf einen Flex-Container zeigst, kommen im Auskunftsstreifen vier Zeilen dazu, die es sonst nicht gibt: flex-direction, justify-content, align-items und gap. Bei den beiden Kästen im Beispiel steht viermal dasselbe, nur flex-direction unterscheidet sich, row gegen column. Und an den Kindern siehst du die Folge: im waagerechten Kasten sind sie verschieden breit, je nach Inhalt, und alle 120 Pixel hoch. Im senkrechten ist es genau umgekehrt, alle 340 breit und 43 hoch. Ein Item nimmt auf der Hauptachse, was es braucht, und füllt die Querachse aus.

Daraus folgt die Regel, die den Rest des Abschnitts trägt:

• justify-content arbeitet auf der Hauptachse.
• align-items, align-self und align-content arbeiten auf der Querachse.

Nicht “waagerecht” und “senkrecht”. Das stimmt nur, solange flex-direction: row gilt, und dann merkst du dir eine Regel, die bei der ersten Spalte umkippt.

Dass auf der Hauptachse nur eine Eigenschaft steht, ist kein Versehen. Die Querachse hat neben align-items für alle auch align-self für die Ausnahme, die Hauptachse hat so etwas nicht: justify-items und justify-self sind in einem Flex-Container wirkungslos. Sie stehen gültig da und tun nichts, wie so vieles in Lektion 1.4. Soll auf der Hauptachse ein einzelnes Item ausscheren, ist margin: auto das Werkzeug, und das kommt in Lektion 9.3. Bei Grid gibt es die -items-Varianten dann wirklich, dort ist es Lektion 10.5.

04 / 04Was du dir mitnimmst

Drei Sätze, und du hast das Fundament für die nächsten sieben Lektionen:

1. display: flex steht am Container.
2. Flex-Items sind nur die direkten Kinder.
3. justify-* folgt der Hauptachse, align-* der Querachse.

Alles Weitere in diesem Abschnitt sind Werte für diese Achsen. Wenn eine Eigenschaft einmal nicht das tut, was du erwartest, ist die erste Frage nicht “welchen Wert brauche ich”, sondern “auf welcher Achse bin ich gerade”.