Türchen 5 – Flexbox Fundament

Flexbox gehört zu den wichtigsten Layout-Tools im modernen CSS. Doch auch wenn es seit Jahren Standard ist, sehe ich in Code Reviews immer wieder dieselben Stolpersteine. Flexbox wirkt auf den ersten Blick simpel, aber viele seiner Regeln sind nicht intuitiv und genau das führt zu unerwartetem Verhalten im Alltag.

Wer Flexbox wirklich versteht, baut stabilere Layouts, vermeidet unnötige Overrides und spart enorm viel Debugging-Zeit. Deshalb widme ich diesem Thema ein ganzes Türchen, bevor wir im nächsten Schritt zu fortgeschrittenen Flexbox-Patterns übergehen.

Die zentrale Idee von Flexbox

Flexbox ist ein Layout-Modell für eine Dimension.

Das bedeutet:

• Der Hauptachsenfluss bestimmt, wie Items sich horizontal oder vertikal verteilen.
• Die Querachse bestimmt die Ausrichtung der Items zueinander.

Die wichtigste Frage bei jeder Flexbox-Komponente lautet daher:

Was ist die Hauptachse? Horizontal oder vertikal?

Erst wenn das klar ist, ergeben die restlichen Eigenschaften Sinn.

Der wichtigste Einstieg: flex-direction

Viele Fehler entstehen, weil die Hauptachse nicht bewusst festgelegt wird.

.container {
  display: flex;
  flex-direction: row;   /* Standard */
}

Vertikale Layouts:

.container {
  display: flex;
  flex-direction: column;
}

In realen Projekten wird flex-direction erstaunlich oft vergessen und man wundert sich dann, warum etwa justify-content nicht das tut, was man erwartet.

justify-content vs. align-items – die häufigste Verwechslung

Die Grundregel ist simpel:

• justify-content arbeitet entlang der Hauptachse
• align-items arbeitet entlang der Querachse

Wenn flex-direction: row:

justify-content: center; /* horizontal ausrichten */
align-items: center;     /* vertikal ausrichten */

Wenn flex-direction: column:

justify-content: center; /* vertikal ausrichten */
align-items: center;     /* horizontal ausrichten */

Viele „Flexbox funktioniert nicht“-Bugs sind eigentlich nur ein Fall von vertauschten Achsen.

Ein Beispiel: Button-Gruppe

Ein:e Entwickler:in möchte Buttons in einer Zeile gleichmäßig verteilen:

.btn-group {
  display: flex;
  justify-content: space-between;
}

Soweit gut. Dann soll die Gruppe aber vertikal arbeiten:

.btn-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Plötzlich verteilt space-between nicht mehr horizontal, sondern vertikal! Viele ändern nur flex-direction, verstehen aber nicht, dass sich damit die gesamte Achsenlogik ändert – und wundern sich über verschobene Layouts.

flex-grow, flex-shrink, flex-basis – der Motor von Flexbox

Flexbox verteilt verfügbaren Raum dynamisch. Der Schlüssel dazu liegt in den drei Untereigenschaften von flex:

flex-grow

Wie viel zusätzlich vorhandenen Platz ein Item einnehmen darf.

.item {
  flex-grow: 1; /* Item darf wachsen */
}

flex-shrink

Wie stark Items schrumpfen dürfen, wenn nicht genug Platz da ist.

.item {
  flex-shrink: 0; /* Item darf NICHT schrumpfen */
}

Ein häufiger Fehler in realen Projekten:

input {
  flex: 1;
}

Das bedeutet:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

Das Shrinking kann dazu führen, dass Input-Felder kleiner werden als erwartet.

flex-basis

Die Startbreite (oder -höhe) eines Items.

.card {
  flex-basis: 200px;
}

Ein Klassiker: flex-basis hat Vorrang vor width, wenn beides gesetzt ist – es sei denn, flex-basis ist auto, dann greift wieder width.

Praxisbeispiel: Drei Cards mit automatischem Platzverhalten

Viele Teams bauen folgendes Raster:

.cards {
  display: flex;
}

.card {
  flex: 1;
  margin: 1rem;
}

Das Problem: Auf kleinen Screens schrumpfen die Cards bis zur Unlesbarkeit, weil flex-shrink: 1 aktiv ist.

Die bessere Variante:

.card {
  flex: 1 1 250px; /* grow, shrink, basis */
}

Damit:

• Cards wachsen
• dürfen schrumpfen
• aber starten bei 250px

Das Muster ist robust und gehört zu den zentralen Flexbox-Patterns.

gap – der unterschätzte Game Changer

Jahrelang waren Abstände in Flexbox ein Pain-Point. Jetzt gibt es gap – und es löst viele dieser Probleme.

Früher:

.item {
  margin-right: 1rem;
}

Heute:

.container {
  display: flex;
  gap: 1rem;
}

Keine Selektorprobleme. Keine negativen Margins. Keine letzten Elemente, die korrigiert werden müssen.

Moderne Layouts sollten fast immer gap statt margin für interne Abstände nutzen.

Häufige Flexbox-Fallen in großen Projekten

1. Der Default align-items: stretch wird nicht bedacht

Standardverhalten bei row:

• Items füllen automatisch die volle Höhe des Containers.

Das führt oft zu:

• verzogenen Buttons
• gestreckten Input-Feldern
• unerwarteten Höhen

Die Lösung: align-items explizit setzen:

.form-group {
  display: flex;
  align-items: center;
}

Ohne explizites align-items bleibt stretch aktiv und verursacht unsaubere Zeilenhöhen.

2. Fixe Höhen + Flexbox = Probleme

Viele Teams deklarieren:

.header {
  display: flex;
  height: 60px;
}

Wenn dann der Inhalt überläuft, bricht das Layout oder verändert sich unsichtbar. Besser:

.header {
  min-height: 60px;
}

Flexbox ist für flexible Layouts gemacht – fixe Höhen widersprechen dem oft.

3. Flexbox wird dort genutzt, wo Grid besser wäre

Typischer Fall:

.stats {
  display: flex;
  justify-content: space-between;
}

Wenn man aber eigentlich ein 2D-Layout braucht, ist Grid klarer und stabiler. Flexbox sollte nur dann genutzt werden, wenn man in einer Achse denkt.

Ein kleines Praxispattern: Flexbox zum Zentrieren

Das wichtigste Flexbox-Pattern überhaupt:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Man nutzt es so oft, dass es sich lohnt, es als Utility zu pflegen.

Fazit

Flexbox wirkt einfach, aber seine Logik unterscheidet sich stark vom klassischen Box-Modell. Wer die Grundprinzipien versteht – Hauptachse, Grow/Shrink/Basis und die Rolle von align/justify – löst Layoutprobleme schneller und baut robustere Komponenten.

In Türchen 6 geht es dann weiter mit Flexbox-Patterns, die in jeder Codebase vorkommen und die man im Alltag einfach im Kopf haben sollte.