Flexbox interaktiv mit Achsen-Overlay üben

Was macht der Flexbox-Playground?

Der Playground baut Flexbox-Layouts visuell. Du siehst links die Eingabefelder für die sechs Container-Properties — flex-direction, justify-content, align-items, align-content, flex-wrap, gap — und rechts die Live-Vorschau mit echten Flex-Items, die deine Einstellungen sofort umsetzen. Klickst du auf ein Item, öffnen sich die Per-Item-Overrides: order, flex-grow, flex-shrink, flex-basis, align-self.

Über der Vorschau steuert ein Container-Breiten-Slider die Stage-Breite von 240 px bis 1200 px. So testest du in Sekunden, wie sich dasselbe Layout in einer schmalen Sidebar gegenüber einem breiten Hauptbereich verhält — ohne das Browser-Fenster zu skalieren oder DevTools zu öffnen. Das ist die schnellste Annäherung an Container-Queries ohne tatsächliche @container-Regel.

Warum zeichnet ein Overlay die Achsen ein?

Der häufigste Anfänger-Fehler beim Lernen von Flexbox ist der Achsen-Wechsel. Setzt du flex-direction: row, läuft die Hauptachse horizontal, die Querachse vertikal. Sobald du auf column wechselst, tauschen beide. Plötzlich kontrolliert justify-content die vertikale Ausrichtung, align-items die horizontale — und ein Layout, das eben noch funktionierte, sieht völlig anders aus. Das Achsen-Overlay zeichnet die aktuelle Haupt- und Querachse direkt in die Vorschau ein, mit Pfeilen und Beschriftungen. Du siehst sofort, welche Property gerade welche Richtung steuert.

In den meisten Konkurrenz-Playgrounds fehlt dieses Overlay. Das Resultat: Entwickler probieren wahllos justify-content-Werte aus, weil sie nicht sehen, dass die Achse nach dem Wechsel auf column vertikal verläuft. Mit eingeblendeten Achsen wird das Trial-and-Error zu gezielter Einstellung. Lässt sich oben rechts per Checkbox abschalten, falls das Overlay stört.

Wie verhalten sich flex-grow, flex-shrink und flex-basis?

Diese drei Properties bilden die Kurzschreibweise flex und entscheiden, wie Items Platz verteilen oder hergeben.

Property	Bedeutung	Default
flex-grow	Wie aggressiv ein Item übrigen Platz beansprucht. 0 = gar nicht, 1 = teilt sich den Rest, 2 = doppelt so viel wie 1.	0
flex-shrink	Wie aggressiv ein Item schrumpft, wenn der Platz knapp wird. 0 = nie kleiner als die Basis, 1 = teilt den Mangel.	1
flex-basis	Ideale Größe, bevor verteilt oder weggenommen wird. auto = Content-Größe, 0 = vollständig per grow steuern.	auto

Eine häufige Falle: flex-basis: 0 mit flex-grow: 1 (kurz flex: 1) verteilt den Container-Platz gleichmäßig, aber Items mit langem Inhalt können trotzdem überlaufen. Grund: Items haben standardmäßig min-width: auto, also nie kleiner als der intrinsische Minimal-Inhalt. Fix: min-width: 0 auf das Item setzen. Der Playground warnt bei dieser Kombination automatisch.

Wann nimmt man Flexbox, wann CSS Grid?

Flexbox und CSS Grid sind komplementär, nicht konkurrierend. Die Daumenregel: Flexbox für eine Achse, Grid für zwei Achsen.

Flexbox passt zu:

• Navigationsleisten, Header-Toolbars, Tab-Bars
• Karten in einer Reihe mit gleicher Höhe
• Vertikale Sidebar-Menüs
• Zentriertes Modal-Innenleben
• Sticky-Footer (Container flex-direction: column, Main mit flex-grow: 1)
• Form-Layouts mit Label links / Eingabe rechts

Grid passt besser zu:

• Ganze Seiten-Layouts mit Sidebar, Header, Main, Footer
• Karten-Raster mit gleichen Abständen in beide Richtungen
• Magazin-Layouts mit übergreifenden Bereichen
• Tabellen-ähnliche Strukturen ohne <table>
• Holy-Grail-Layouts mit fixen Außenspalten

In der Praxis kombiniert man beides: Grid für das Außenskelett, Flexbox für die Innen-Komponenten. Der Playground generiert ausschließlich Flexbox-Code — für Grid gibt es ein eigenständiges Schwester-Tool im Backlog.

Wie schreibe ich Flexbox als Tailwind-Utility-Classes?

Tailwind hat seit der v3.0 (Dezember 2021) durchgängig dieselben Flexbox-Class-Namen verwendet — die grow-, shrink- und basis-…-Utilities sind also auf v3 und v4 identisch. Wer einen älteren Codebase mit flex-grow, flex-shrink-0 oder flex-basis-[120px] sieht, schaut auf Tailwind v2-Reste oder eine handgepflegte Klassenliste — das war nie offizielles v3.

Konzept	Tailwind v3 / v4	Pure CSS
Wachsen	grow	flex-grow: 1
Variabel wachsen	grow-[2]	flex-grow: 2
Nicht schrumpfen	shrink-0	flex-shrink: 0
Variabel schrumpfen	shrink-[2]	flex-shrink: 2
Basis-Wert	basis-[120px]	flex-basis: 120px
Auto-Basis	basis-auto	flex-basis: auto

Der Playground bietet beide Tabs (tailwind-v3 und tailwind-v4) trotzdem an, damit Migrations-Audits, IDE-Snippets und Code-Reviewer den Output 1:1 in beide Codebases kopieren können. Inhaltlich emittieren beide Tabs identische Class-Namen — der Unterschied zwischen v3 und v4 liegt nicht in den Flexbox-Utilities, sondern in CSS-first-Konfiguration (@theme), Lightning-CSS-Engine und umbenannten Gradient-Utilities (bg-linear-to-* statt bg-gradient-to-*).

Warum passiert manchmal nichts beim Einstellen?

Flexbox hat einige stille Interaktionen — du änderst eine Property und nichts ändert sich. Häufige Ursachen:

align-content ohne Wrap. align-content ordnet Flex-Linien entlang der Querachse. Linien existieren aber nur, wenn flex-wrap: wrap oder wrap-reverse aktiv ist. Bei nowrap gibt es genau eine Linie — align-content hat nichts zu tun. Der Playground meldet das im Hinweise-Panel.

justify-self auf einem Item. Diese Property existiert in CSS Grid, aber NICHT in Flexbox. Wer ein einzelnes Item entlang der Hauptachse verschieben will, nimmt margin-left: auto auf dem Item — der Trick verschiebt das Item plus alle Nachfolger nach rechts (bei flex-direction: row). So entsteht das klassische „Logo links, Menü rechts”-Pattern.

flex-basis ohne flex-grow. Setzt du flex-basis: 0, sind alle Items theoretisch null Pixel breit — wachsen aber nicht weiter, weil flex-grow: 0 der Default ist. Items kollabieren auf min-content. Fix: zusätzlich flex-grow: 1 setzen, oder die Kurzschreibweise flex: 1 nutzen.

min-width: auto blockt Schrumpfen. Items haben standardmäßig min-width: auto — sie werden nie kleiner als ihr intrinsischer Mindest-Inhalt. Bei langen Texten oder breiten Bildern sprengt das Inhalts-Items das Container-Layout. Fix: min-width: 0 auf dem Item.

Welche Anwendungsfälle decken die Presets ab?

Fünf Real-World-Layouts mit jeweils einem Lerntipp:

Navigationsleiste. Container mit flex-direction: row und gap: 16px. Das erste Item (Logo) bekommt flex-grow: 1, sodass alle übrigen Items nach rechts gedrückt werden. Lerntipp: Statt des nicht existierenden justify-self nimmt man margin-left: auto auf dem letzten Element vor der Menü-Gruppe.

Karten-Raster. flex-wrap: wrap plus gap: 16px lässt Karten umbrechen, sobald der Platz nicht reicht. Items mit flex-basis: 200px und flex-grow: 1 füllen jede Zeile gleichmäßig. Lerntipp: min-width: 0 auf Karten mit langem Inhalt, sonst sprengen sie das Layout.

Holy-Grail-Layout. Drei-Spalten-Layout mit fester Sidebar links, flüssigem Main, fester Sidebar rechts. Außenspalten bekommen flex: 0 0 200px, Main flex: 1 1 auto. Lerntipp: Beim Wechsel auf flex-direction: column für Mobile kippen die Achsen — Sidebar wird oben/unten, nicht mehr links/rechts.

Klebriger Footer. Container hat flex-direction: column und füllt mindestens die Viewport-Höhe. Das Main-Element bekommt flex-grow: 1, Footer hängt automatisch unten. Lerntipp: Kein position: absolute nötig — Flexbox erledigt das robust und ohne Z-Index-Konflikte.

Zentriert auf beiden Achsen. Klassisches „Hello World” der Flexbox-Welt. justify-content: center plus align-items: center auf dem Container, das war’s. Lerntipp: Auf dem zentrierten Item ist KEINE zusätzliche Property nötig — der Container erledigt alles.

Häufige Fragen

Wie funktioniert Flexbox in CSS?

Flexbox ist ein eindimensionales Layout-Modell. Ein Elternelement mit display: flex wird zum Flex-Container; seine direkten Kinder werden zu Flex-Items, die entlang einer Hauptachse angeordnet werden. Die Hauptachse legt flex-direction fest, die Querachse steht senkrecht dazu.

Was ist der Unterschied zwischen Flexbox und CSS Grid?

Flexbox ist eindimensional — Items wandern entweder in einer Reihe oder in einer Spalte. CSS Grid ist zweidimensional und definiert Zeilen UND Spalten gleichzeitig. Faustregel: Komponenten mit Flexbox, ganze Seiten-Layouts mit Grid.

Wann sollte man Flexbox statt Grid nutzen?

Immer wenn der Inhalt entlang einer Achse fließen soll: Navigationsleisten, Toolbars, Karten in einer Reihe, vertikale Sidebar-Listen, zentriertes Modal-Innenleben. Sobald du parallel Zeilen UND Spalten kontrollieren willst, ist Grid das richtige Werkzeug.

Wie zentriert man Items vertikal und horizontal mit Flexbox?

Auf den Container display: flex; justify-content: center; align-items: center; setzen. Das funktioniert mit jeder Anzahl von Items und ohne explizite Höhe am Item selbst. Achtung: align-items braucht eine Höhe am Container, sonst gibt es keine Querachse zum Zentrieren.

Warum funktionieren align-content und flex-wrap zusammen?

align-content ordnet ganze Flex-Linien entlang der Querachse — und Linien gibt es nur, wenn umgebrochen wird. Bei flex-wrap: nowrap existiert nur eine Linie, also wirkt align-content nicht. Sobald flex-wrap: wrap aktiv ist, kontrolliert die Eigenschaft den Abstand zwischen den Linien.

Was bedeuten flex-grow, flex-shrink und flex-basis?

flex-basis ist die ideale Größe, bevor Platz verteilt oder weggenommen wird. flex-grow legt fest, wie aggressiv ein Item überschüssigen Platz beansprucht (0 = gar nicht, 1 = teilt sich den Rest, 2 = doppelt so viel wie 1). flex-shrink macht das Gegenteil, wenn der Platz knapp wird. Die Kurzschreibweise flex: 1 1 0 setzt alle drei.

Wie unterscheiden sich Flexbox-Klassen in Tailwind v4 von v3?

Tailwind v4 hat den flex- Prefix auf Item-Utilities entfernt: grow, shrink-0, basis-[120px] ersetzen flex-grow, flex-shrink-0, flex-basis-[120px]. Container-Utilities (flex, flex-col, justify-center, items-center) bleiben gleich. Der Playground gibt beide Varianten parallel aus.

Speichert das Tool meine Layouts?

Nein. Alle Einstellungen liegen ausschließlich im Browser-Tab — kein Server, kein Account, keine Cookies. Beim Neuladen startet der Playground mit den Default-Werten. Wer ein Layout sichern will, kopiert den Code-Output in das eigene Stylesheet.

Welche CSS-Tools sind verwandt?

Weitere Tools für visuelles CSS-Authoring:

• CSS-Gradient-Generator — Linear-, Radial- und Konische-Verläufe mit OKLCH und Tailwind-v4-Output.
• Box-Shadow-Generator — Mehrschichtige Schatten mit Material-3-Elevation-Presets.
• CSS-Formatter — Rohes oder minifiziertes CSS sauber formatieren.
• Kontrast-Prüfer — WCAG-AAA-Kontrast zwischen zwei Farben prüfen.