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

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.

CSS Flexbox Generator Online — Visueller Builder mit Tailwind-Ausgabe

Erstelle CSS Flexbox-Layouts visuell und kopiere den Code in Sekunden. Passe flex-direction, justify-content, align-items, gap und flex-grow an — die Live-Vorschau aktualisiert sich sofort. Keine Konfiguration, keine Anmeldung, keine Installation.

Im Gegensatz zu anderen Generatoren zeigt dieses Tool Tailwind-Klassen und Vanilla-CSS gleichzeitig an. Wechsle zwischen den Tabs Tailwind, CSS und React/JSX und kopiere das Format, das dein Projekt verwendet. Zehn Layout-Vorlagen (Navbar, Centered Hero, Card Grid, Sidebar, Holy Grail und mehr) ermöglichen einen schnellen Start.

So verwendest du den CSS Flexbox Generator

Ein Flexbox-Layout aufzubauen dauert weniger als eine Minute:

  1. Vorlage wählen — klicke auf eine Vorlage in der Galerie oben (Navbar, Card Grid, Sidebar…), um eine vollständige Konfiguration zu laden. Vorschau und Code werden sofort aktualisiert.
  2. Container-Eigenschaften anpassen — nutze die Steuerelemente links, um flex-direction, flex-wrap, justify-content, align-items, align-content und gap zu ändern. Die Vorschau spiegelt jede Änderung in Echtzeit wider.
  3. Einzelne Elemente feinabstimmen — klicke auf eine farbige Box in der Vorschau (oder auf die Element-Tabs), um flex-grow, flex-shrink, flex-basis, align-self und order dieses Elements zu bearbeiten.
  4. Code kopieren — wechsle zwischen den Tabs Tailwind, CSS oder React im Code-Panel und klicke auf Kopieren oder drücke Shift+Enter. Nutze den Download-Button, um die CSS-Datei zu speichern.

Falls eine Eigenschaft in der aktuellen Konfiguration keinen Effekt hat — zum Beispiel align-content wenn flex-wrap als nowrap gesetzt ist — erklärt eine kontextuelle Warnung genau warum und wie es zu beheben ist.

CSS Flexbox Beispiele

Echte Ausgaben des Generators für gängige Layout-Muster:

Navbar (space-between, center)

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Tailwind: flex justify-between items-center gap-4

Zentrierter Hero (beide Achsen)

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

Tailwind: flex justify-center items-center

Card-Raster mit Zeilenumbruch

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Tailwind: flex flex-wrap gap-4

Was ist CSS Flexbox?

CSS Flexible Box Layout (Flexbox) ist ein eindimensionales Layout-Modell — es ordnet Elemente in einer einzigen Zeile oder Spalte an. Anders als ältere Layout-Methoden gibt Flexbox präzise Kontrolle darüber, wie Elemente wachsen, schrumpfen und sich ausrichten, auch wenn ihre Größen unbekannt oder dynamisch sind.

Flexbox arbeitet auf zwei Achsen: der Hauptachse (durch flex-direction definiert) und der Querachse (senkrecht zur Hauptachse). justify-content steuert die Ausrichtung auf der Hauptachse; align-items auf der Querachse. Diese Unterscheidung ist der häufigste Verwirrungspunkt für Entwickler — deshalb sind kontextuelle Warnungen so wertvoll.

Häufige Anwendungsfälle

  • Navigationsleisten: flex, justify-content: space-between, align-items: center — das klassische Muster für Logo links und Links rechts.
  • Element zentrieren: display: flex; justify-content: center; align-items: center auf dem Eltern-Container mit definierter Höhe. Der schnellste Weg, ein Div zu zentrieren.
  • Card-Zeilen: flex, flex-wrap: wrap, gap — Cards reihen sich an und umbrechen in die nächste Zeile wenn der Viewport zu schmal wird.
  • Sidebar + Inhalt: flex, flex-wrap: nowrap, align-items: stretch — ein schmales festes Element und eines, das den verbleibenden Platz füllt (flex-grow: 1).
  • Formularzeilen: flex, align-items: center, gap — Label und Input in derselben Zeile mit konsistenter vertikaler Ausrichtung.
  • Button-Gruppen: flex, flex-wrap: wrap, justify-content: flex-end, gap — Buttons umbrechen auf kleinen Bildschirmen.

Flexbox vs. CSS Grid: Wann was verwenden?

Verwende Flexbox für eindimensionale Layouts — eine Zeile von Buttons, eine Navbar, Ausrichtung innerhalb einer Komponente. Verwende Grid für zweidimensionale Layouts — wenn du Zeilen UND Spalten gleichzeitig kontrollieren musst, wie die vollständige Struktur einer Seite.

Die meisten modernen Designs verwenden Grid für das Makro-Layout der Seite und Flexbox innerhalb jeder Komponente.

Häufig gestellte Fragen

Was ist der Unterschied zwischen justify-content und align-items in Flexbox?

justify-content steuert die Ausrichtung auf der Hauptachse — horizontal wenn flex-direction row ist, vertikal wenn es column ist. align-items steuert die Querachse (die senkrechte Richtung). Um ein Element auf beiden Achsen zu zentrieren: display: flex; justify-content: center; align-items: center auf dem Eltern-Container mit definierter Höhe.

Warum funktioniert align-content in meinem Flexbox-Layout nicht?

align-content hat nur dann einen Effekt, wenn zwei Bedingungen erfüllt sind: (1) flex-wrap ist auf wrap oder wrap-reverse gesetzt, und (2) Elemente haben sich tatsächlich auf mehrere Zeilen umgebrochen. Bei einem einzeiligen Container — das Standardverhalten flex-wrap: nowrap — hat align-content keinerlei visuellen Effekt. Der Generator zeigt eine Warnung an, wenn align-content mit aktivem nowrap gesetzt wird.

Was bedeutet flex: 1 in CSS?

flex: 1 ist die Kurzform für flex: 1 1 0% — das Element kann wachsen (flex-grow: 1), kann schrumpfen (flex-shrink: 1) und beginnt mit einer Basisgröße von null (flex-basis: 0%). Wenn mehrere Elemente flex: 1 haben, teilen sie den verfügbaren Platz gleichmäßig auf — das häufigste Muster für gleichbreite Spalten.

Wie zentriere ich ein Div vertikal und horizontal mit Flexbox?

Auf dem Eltern-Container: display: flex; justify-content: center; align-items: center. Der Container muss eine definierte Höhe haben — einen festen Wert, height: 100vh, oder die Höhe von seinem eigenen Elternelement erben. Ohne Höhe hat die vertikale Zentrierung keinen Platz zum Arbeiten.

Exportiert der Generator Tailwind CSS-Klassen?

Ja — und zeigt Tailwind und Vanilla-CSS gleichzeitig an. Wechsle zwischen den Tabs Tailwind, CSS und React im Code-Panel. Die Tailwind-Ausgabe verwendet Standard-Hilfsklassen (flex, justify-between, items-center, gap-4 usw.). Für Gap-Werte außerhalb der Standard-Tailwind-Skala verwendet der Generator die Arbitrary-Value-Syntax: gap-[20px].

Ressourcen

Verwandte Tools