CSS-Flexbox-Playground
NeuFlex-Eigenschaften mit Live-Vorschau anpassen und das CSS kopieren.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Ein visueller Flexbox-Generator, der das CSS für Sie schreibt
Dieser Flexbox-Generator verwandelt das CSS Flexible Box Layout in etwas Sichtbares. Statt zu raten, was justify-content oder align-items bewirken, aktivieren Sie jede Eigenschaft an einem beschrifteten Regler und sehen, wie sich die Live-Vorschau sofort neu anordnet — dann kopieren Sie sauberen, produktionsreifen Code. Er läuft vollständig in Ihrem Browser, ohne Anmeldung und ohne etwas hochzuladen.
Es ist ein echter Flexbox-Playground: ein echter Flex-Container mit bearbeitbaren Kindelementen, vollständige Container- und Einzelelement-Steuerung, verschachtelte Container, eine skalierbare responsive Vorschau und eine teilbare URL. Ob Sie Flexbox lernen oder schnell eine Navigationsleiste, eine Kartenreihe oder einen zentrierten Hero-Bereich bauen — Sie erhalten das exakte Layout und das passende CSS, Tailwind oder Bootstrap in Sekunden.
Jede Container-Eigenschaft mit Live-Vorschau
Steuern Sie den Container so, wie es die Spezifikation vorsieht. Setzen Sie flex-direction (row, row-reverse, column, column-reverse) zur Wahl der Hauptachse, justify-content zum Verteilen der Elemente entlang dieser Achse und align-items zur Ausrichtung auf der Querachse. Aktivieren Sie flex-wrap, damit Elemente in neue Zeilen fließen, nutzen Sie align-content zum Verteilen dieser umbrochenen Zeilen und stellen Sie unabhängige Zeilen- und Spaltenlücken ein.
Eine eingebaute Achsenlegende zeigt, welche Richtung die Hauptachse und welche die Querachse ist, sobald Sie flex-direction ändern — so wird die Beziehung zwischen justify-content und align-items endlich klar. Es ist ein praxisnaher Flexbox-Spickzettel, den Sie durch Ausprobieren erlernen.
Einzelelement-Steuerung: grow, shrink, basis, order und align-self
Die meisten Generatoren enden beim Container. Dieser lässt Sie auf jedes Element in der Vorschau klicken und es einzeln bearbeiten: Setzen Sie flex-grow, flex-shrink und flex-basis (das flex-Kurzschreibweise), überschreiben Sie das align-self und ändern Sie die order, um das Element visuell neu zu positionieren, ohne das HTML anzufassen. Fügen Sie Elemente hinzu oder entfernen Sie sie, um zu testen, wie sich der Platz verteilt.
So lassen sich echte Muster einfach umsetzen — eine feste Seitenleiste neben einer flexiblen Hauptspalte (flex: 0 0 240px neben flex: 1), ein einzelnes zentriertes Element oder ein Footer-Link, der mit margin-left: auto ans Ende geschoben wird.
Verschachteltes Flexbox und responsive Vorschau
Echte Layouts verschachteln. Jedes Element kann sein eigener verschachtelter Flex-Container mit eigener Richtung, Justify und Align werden — genau das, was ein verschachtelter Flexbox-Generator für Karten mit einer Kopfzeile über dem Inhalt oder für eine Toolbar innerhalb einer Toolbar braucht. Der generierte Code enthält auch die verschachtelten Regeln.
Da Flexbox um responsives Verhalten geht, ist die Vorschau skalierbar: Ziehen Sie den Anfasser oder wählen Sie eine Breiten-Voreinstellung Mobile / Tablet / Desktop und beobachten Sie, wie Elemente bei jeder Breite umbrechen und sich neu ausrichten. Das ist der schnellste Weg, ein responsives Flexbox-Layout zu überprüfen, bevor Sie es veröffentlichen.
Als CSS, Tailwind oder Bootstrap kopieren — und Vergleich mit anderen Tools
Wechseln Sie den Ausgabe-Tab, um das Format zu erhalten, das Ihr Projekt verwendet. CSS liefert saubere .container- und Einzelelement-Regeln mit dem flex-Kurzschreibweise. Tailwind schreibt die Utility-Klassen — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — in einem einfügebereiten HTML-Snippet. Bootstrap gibt die äquivalenten d-flex-Utility-Klassen aus. Nur die tatsächlich geänderten Eigenschaften werden ausgegeben, sodass die Ausgabe minimal und lesbar bleibt.
Andere visuelle Generatoren wie Flexbox.help lassen Einzelelement-Steuerung und verschachtelte Container aus. Tailwinds Online-Playground generiert kein Vanilla-CSS. Dieses Tool unterstützt alle drei Ausgabeformate, verarbeitet Verschachtelung und läuft offline, sobald es geladen ist — kein Konto, keine Kosten, keine Daten, die Ihren Browser verlassen.
Frequently asked questions
Was ist Flexbox in CSS und wofür wird es verwendet?
Flexbox (das CSS Flexible Box Layout) ist ein eindimensionales Layoutmodell, um Elemente in einer einzigen Zeile oder Spalte anzuordnen und den Platz zwischen ihnen zu verteilen. Man aktiviert es mit einer einzigen Zeile — display: flex — am übergeordneten Element, und dessen Kinder werden zu Flex-Elementen, die man ohne Floats oder manuelle Abstände ausrichten, verteilen und skalieren kann. Es wird eingesetzt, weil es häufige Aufgaben vereinfacht: Zentrierung, gleichhohe Spalten, Navigationsleisten und Kartenreihen.
Wie verwendet man Flexbox?
Fügen Sie display: flex zum Container-Element hinzu, dann steuern Sie die Kinder mit den Container-Eigenschaften — flex-direction (row oder column), justify-content (Abstand entlang der Hauptachse), align-items (Ausrichtung auf der Querachse), flex-wrap und gap. Zum Beispiel legt .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } ein Logo und Links in einer Zeile an, vertikal zentriert und an gegenüberliegenden Enden.
Wie zentriert man ein Div mit Flexbox?
Machen Sie das übergeordnete Element zu einem Flex-Container und zentrieren Sie auf beiden Achsen: .parent { display: flex; justify-content: center; align-items: center; } — das platziert das Kind genau in der horizontalen und vertikalen Mitte. Geben Sie dem übergeordneten Element eine Höhe (z.B. min-height: 100vh für Vollbild-Zentrierung). Das ist der sauberste Weg, ein Element perfekt zu zentrieren.
Was ist der Unterschied zwischen justify-content und align-items?
justify-content positioniert Elemente entlang der Hauptachse, während align-items sie auf der Querachse positioniert. Mit dem Standard-flex-direction: row verteilt justify-content Elemente horizontal und align-items richtet sie vertikal aus. Wechseln Sie zu flex-direction: column, tauschen beide die Rollen. Die Live-Achsenlegende im Tool zeigt, welche welche ist, wenn Sie die Richtung ändern.
Was sind flex-grow, flex-shrink und flex-basis?
Das sind die drei Einzelelement-Eigenschaften, die bestimmen, wie sich ein Flex-Element in der Größe verhält — üblicherweise zusammen als Kurzschreibweise flex geschrieben. flex-basis ist die Ausgangsgröße, bevor freier Platz verteilt wird. flex-grow bestimmt, wie begierig sich ein Element ausdehnt (0 = nicht wachsen, 1 = einen Anteil nehmen). flex-shrink bestimmt, wie bereitwillig es schrumpft, wenn der Platz knapp wird.
Wie bringe ich Flex-Elemente zum Umbruch?
Setzen Sie flex-wrap: wrap am Container, damit Elemente, die nicht passen, in eine neue Zeile fließen statt zu überlaufen. Standardmäßig ist flex-wrap: nowrap, was alles in einer Zeile erzwingt. Mit aktiviertem Umbruch geben Sie den Elementen eine flex-basis (wie flex: 1 1 200px), damit jede Zeile sich ordentlich füllt, und nutzen Sie align-content, um die entstandenen Zeilen zu verteilen.
Ist dieser Flexbox-Generator kostenlos und privat?
Kostenlos ohne Anmeldung. Der gesamte Playground läuft in Ihrem Browser — Ihr Layout, das generierte CSS und der Freigabelink werden alle auf Ihrem Gerät erstellt und nie auf einen Server hochgeladen. Sie können ihn als Lesezeichen speichern und nach dem Laden offline verwenden. Es gibt kein Konto und keine Begrenzung der konfigurierten Layouts.
Related tools
Alle Tools ansehen
Neu Farbmischer
Zwei Farben in beliebigem Verhältnis mischen und das Ergebnis oder jeden Schritt kopieren.
Neu Bild-Farbpicker
Wähle jede beliebige Farbe aus einem Bild und extrahiere die dominante Palette als HEX, RGB und HSL.
Neu Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Neu Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Farbwähler & Konverter
Eine Farbe wählen und zwischen HEX, RGB, HSL und OKLCH umwandeln.
Neu Farbkontrast-Prüfer
WCAG-AA/AAA-Kontrastverhältnisse zwischen Text- und Hintergrundfarben prüfen.