Die zwei Achsen

Flexbox hat den Ruf, kompliziert zu sein. Das liegt an einer Sache. Es gibt vier Eigenschaften (justify-content, align-items, align-self, align-content), die aussehen, als täten sie dasselbe. Welche davon greift, hängt an einer Angabe, die man leicht übersieht.

01 / 03Eine 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: 16px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 8px;
  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. Damit sagst du dem Elternteil, dass es seine Kinder verteilen soll, und 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. Die 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. Soll sich auch das ändern, gibt es display: inline-flex. Das brauchst du aber selten.

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

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

.reihe {
  padding: 16px;
  background-color: #f4f4f5;
}

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

/* So nicht: die Angabe steht an den Kästen. Jeder
   wird damit Flex-Container für seinen eigenen Text,
   und die Reihe bleibt ein Stapel. */
.kasten {
  display: flex;
}

Im zweiten Beispiel steht dieselbe Zeile an den drei Kästen statt an ihrem Elternteil, und sie stapeln sich weiter. Jeder Kasten ist jetzt selbst ein Flex-Container, aber nur für seinen eigenen Text. Im Inspector siehst du es auch. Die vier Flex-Zeilen stehen am Kasten, an der Reihe drumherum fehlen sie.

02 / 03Nur 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: 16px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 8px;
  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;
}

An diesem zweiten Punkt hängt später die Fehlersuche. Die Kinder eines Flex-Containers heißen Flex-Items, kurz Items, und das 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. Sollen auch die nebeneinander stehen, 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. Die Kopfzeile des Portfolios ist so gebaut. Außen stehen zwei Blöcke, innen die Navigationsliste mit ihren Links.

03 / 03Hauptachse 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: 16px;
  background-color: #f4f4f5;
}

.kasten {
  padding: 8px;
  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;
}

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

Setzt du flex-direction: column, tauschen die beiden. Die Hauptachse läuft dann nach unten und die Querachse nach rechts.

Im Beispiel steht in beiden Kästen 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.

Ab hier hilft der Inspector richtig. An einem Flex-Container stehen im Auskunftsstreifen vier Zeilen, die es sonst nicht gibt: flex-direction, justify-content, align-items und gap. Bei den beiden Kästen im Beispiel stehen drei der vier Zeilen gleich da. Nur flex-direction unterscheidet sich, row gegen column.

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 umgekehrt. Bei der Breite, mit der die Spalte startet, sind dort alle 332 breit und rund 35 hoch. Ein Item nimmt auf der Hauptachse, was es braucht, und füllt die Querachse aus.

Daraus folgt die Regel für den Rest des Abschnitts.

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

Also nicht „waagerecht“ und „senkrecht“. Das stimmt nur, solange flex-direction: row gilt, und sonst 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. 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.

Alles Weitere in diesem Abschnitt sind Werte für diese Achsen. Wenn eine Eigenschaft einmal nicht tut, was du erwartest, frage ich zuerst nach der Achse. Der Wert kommt erst danach.

In der Aufgabe steht die Navigation des Portfolios noch untereinander wie eine Einkaufsliste.