CSS Flexbox Generator

CSS Flexbox Generator

Kostenloser CSS Flexbox Generator: Live-Vorschau, Tailwind & CSS gleichzeitig, 10 Layout-Vorlagen, kontextuelle Warnungen und React/JSX-Export. Keine Anmeldung.

Aktualisiert Juni 2026

Geprüft von Rafael Duarte

Layout-Vorlagen
Container
display flex
flex-direction row
flex-wrap nowrap
justify-content flex-start
align-items stretch
align-content stretch

Benötigt flex-wrap: wrap

16px
Live-Vorschau
3/8
Code 
flex
gap-4
Overrides
16px
Rahmenradius
Element

Klicke auf ein Element in der Vorschau, um es zu bearbeiten.

So funktioniert's

Vom Preset zum fertigen Code in unter einer Minute

1. Preset wählen

Navbar, Card Grid, Sidebar, Holy Grail, App Shell — Vorschau und Code aktualisieren sich sofort.

2. Container und Items anpassen

flex-direction, justify-content, align-items einstellen — oder auf ein Item in der Vorschau klicken, um grow, shrink, basis und order einzeln zu bearbeiten.

3. Code kopieren

Zwischen den Tabs Tailwind, CSS und React wechseln, mit einem Klick kopieren oder die .css-Datei herunterladen.

Was dieser Flexbox-Generator kann

Doppelter Output, Hinweise mit Begründung

Tailwind, CSS und React gleichzeitig

Alle drei Ausgabeformate stehen parallel als Tabs zur Verfügung — kein manuelles Übersetzen von Klassen nötig.

10 fertige Layouts

Navbar, zentrierter Hero, Card Grid, Sidebar, Holy Grail, App Shell und mehr — Startpunkt ist ein echtes Muster, keine leere Fläche.

Kontextabhängige Hinweise

Wenn eine Eigenschaft bei der aktuellen Einstellung keine Wirkung zeigt (z. B. align-content ohne wrap), erklärt das Tool direkt, woran es liegt.

Bearbeitung pro Item

Jede Box in der Vorschau anklicken, um flex-grow, flex-shrink, flex-basis, align-self und order einzeln zu setzen.

Responsive Vorschau

Viewport zwischen Mobile (375px), Tablet (768px) und Desktop umschalten, um das Layout vor dem Kopieren zu prüfen.

App-Shell-Preset mit mehreren Codeblöcken

Erzeugt in einem Schritt CSS/Tailwind/React für Navbar, Sidebar und Inhaltsbereich — das typische Grundgerüst einer Anwendung.

Beispiele

Gängige Muster und der dazugehörige CSS-Code

Muster
Generierter CSS-Code
Navbar
display:flex; justify-content:space-between; align-items:center; gap:16px
Zentrierter Hero-Bereich
display:flex; justify-content:center; align-items:center
Card-Grid mit Zeilenumbruch
display:flex; flex-wrap:wrap; gap:16px
Button-Gruppe (umbrechend, rechtsbündig)
display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px

Wann du dieses Tool brauchst

Die häufigsten Situationen beim Layouten mit Flexbox

Navigationsleisten

flex + justify-content:space-between + align-items:center — Logo links, Links rechts, alles vertikal sauber ausgerichtet.

Element zentrieren

Der schnellste Weg, ein Div auf beiden Achsen zu zentrieren — ganz ohne margin-Tricks oder position:absolute.

Reihen aus Cards

flex-wrap:wrap + gap — Cards springen in die nächste Zeile, sobald der Viewport schmaler wird, ohne zusätzliche Media Queries.

Sidebar plus Inhalt

Ein Element mit fester Breite und ein zweites mit flex-grow:1, das den restlichen Platz füllt.

Formularfelder in einer Zeile

flex + align-items:center + gap — Label und Eingabefeld in derselben Zeile, mit konsistentem Abstand.

Button-Gruppen

flex-wrap:wrap + justify-content:flex-end + gap — Buttons ordnen sich auf kleinen Bildschirmen neu an, ohne das Layout zu sprengen.

Häufige Flexbox-Fehler

Die Stolperfallen, die beim Arbeiten mit flex am öftesten auftauchen

justify-content und align-items verwechseln

justify-content steuert die Hauptachse, align-items die Querachse. Bei flex-direction:column tauschen sich beide Rollen — dann läuft die Hauptachse vertikal.

align-content ohne flex-wrap:wrap

align-content wirkt nur, wenn die Items tatsächlich in mehrere Zeilen umgebrochen sind — das Tool weist genau darauf hin, wenn das der Fall ist.

Erwarten, dass order die DOM-Reihenfolge ändert

order verändert nur die visuelle Reihenfolge. Die Tabulatorreihenfolge folgt weiterhin dem DOM — relevant für Barrierefreiheit, falls man sich darauf verlässt.

Items schrumpfen nicht unter ihren Inhalt

min-width steht standardmäßig auf auto — ein Item schrumpft trotz flex-shrink nicht kleiner als sein eigener Inhalt, was zu Overflow führt. min-width:0 auf dem Item setzen, damit es wirklich schrumpfen kann.

Vergessen, dass align-items:stretch der Standard ist

Ohne explizite align-items-Angabe strecken sich Items auf die volle Höhe des Containers entlang der Querachse — überraschend für alle, die automatische Höhe erwarten. align-items:flex-start setzen, falls das nicht gewünscht ist.

Container ohne Höhe für vertikales Zentrieren

justify-content:center und align-items:center zentrieren nur dann wirklich, wenn der Container eine definierte Höhe hat (fest, 100vh oder vom Elternelement geerbt) — ohne Höhe gibt es keinen zusätzlichen Platz zum Verteilen.

Warum dieser Flexbox-Generator

Tailwind-Klassen, reines CSS und ein React-Style-Objekt stehen gleichzeitig zur Verfügung — die meisten Flexbox-Generatoren liefern nur ein einziges Ausgabeformat.

Die kontextabhängigen Hinweise erklären, warum eine Eigenschaft gerade nicht greift, und ersparen das Trial-and-Error, das fast jeder bei align-content und flex-wrap durchmacht.

Zusätzlich zum Code simuliert das Tool das Layout in drei Bildschirmbreiten und erlaubt, bis zu 8 Items einzeln zu bearbeiten — grow, shrink, basis, align-self und order — direkt in der Vorschau, ohne es erst im eigenen Projekt auszuprobieren.

Flexbox vs. CSS Grid

Wann sich welches Layout-System eignet

Flexbox
CSS Grid
Dimensionen
eindimensional (eine Zeile ODER eine Spalte)
zweidimensional (Zeilen UND Spalten)
Am besten für
Navbar, Ausrichtung innerhalb einer Komponente
das gesamte Seitenlayout
Typischer Einsatz
innerhalb einzelner Komponenten/Bereiche
komplette Seitenstruktur

Häufig gestellte Fragen

justify-content steuert die Hauptachse (horizontal bei row, vertikal bei column). align-items steuert die Querachse. Um auf beiden Achsen zu zentrieren, beide Eigenschaften auf center setzen.

Weiterführende Links

MDN — CSS Flexible Box Layout

Vollständige Referenz der Spezifikation inklusive Browser-Kompatibilitätsdaten.

CSS-Tricks — A Complete Guide to Flexbox

Der meistgenutzte visuelle Leitfaden zu allen Flexbox-Eigenschaften.

W3C — CSS Flexible Box Layout Module Level 1

Die offizielle W3C-Spezifikation, die das Verhalten aller Flexbox-Eigenschaften definiert.

Verwandte Tools