CSS Flexbox-Generator

So funktioniert es

1. Container-Eigenschaften setzen: Konfigurieren Sie den Flex-Container, flex-direction, justify-content, align-items, flex-wrap und gap.
2. Flex-Items hinzufügen und konfigurieren: Fügen Sie Kindelemente hinzu und legen Sie individuelle Werte für flex-grow, flex-shrink, flex-basis, align-self und order fest.
3. CSS kopieren: Holen Sie sich das vollständige CSS für Container und Items, einsatzbereit für Ihr Projekt.

Warum den Flexbox-Generator nutzen?

Flexbox ist das wesentliche Werkzeug für eindimensionale CSS-Layouts, Elemente in einer Zeile oder Spalte ausrichten, mit kraftvollen Steuerungen für Verteilung und Ausrichtung. Doch die Eigenschaften sind zahlreich und ihr Zusammenspiel komplex: justify-content gegen align-items, flex-grow gegen flex-basis, Hauptachse gegen Querachse. Dieser interaktive Generator gibt sofortiges visuelles Feedback beim Umschalten jeder Eigenschaft, der schnellste Weg, Flexbox zu lernen und passendes CSS für Ihr Layout zu erhalten.

Funktionen

• Interaktive Vorschau: Flex-Items verschieben und Eigenschaften umschalten, um Layout-Änderungen in Echtzeit zu sehen.
• Alle Container-Eigenschaften: flex-direction, flex-wrap, justify-content, align-items, align-content und gap.
• Steuerung pro Element: flex-grow, flex-shrink, flex-basis, align-self und order individuell pro Element festlegen.
• Visuelle Achsen-Indikatoren: Haupt- und Querachse werden hervorgehoben, um das gedankliche Modell zu festigen.
• CSS-Ausgabe: vollständiges, kopierbereites CSS für Container und alle konfigurierten Items.

Häufige Fragen

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

justify-content verteilt Items entlang der Hauptachse (standardmäßig horizontal). align-items richtet Items entlang der Querachse aus (standardmäßig vertikal). Steht flex-direction auf column, vertauschen sich die Achsen, justify-content wird vertikal, align-items wird horizontal.

Wann sollte ich Flexbox und wann CSS Grid einsetzen?

Nutzen Sie Flexbox für eindimensionale Layouts, eine Reihe von Buttons, eine Navigationsleiste, eine Liste umbrechender Karten. Nutzen Sie CSS Grid für zweidimensionale Layouts, bei denen Sie Zeilen und Spalten gleichzeitig steuern müssen, etwa ein vollständiges Seitenlayout oder ein komplexes Karten-Raster.

Was bedeutet flex: 1?

flex: 1 ist die Kurzform für flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Sie weist das Element an, den verfügbaren Platz zu füllen, bei Bedarf zu schrumpfen und vor der Verteilung mit Größe null zu starten. Alle Items mit flex: 1 teilen sich den Platz gleichmäßig.

Was ist Flexbox?

Flexbox (Flexible Box Layout) ist ein CSS-Layout-Modell, entworfen für die Verteilung von Raum und Ausrichtung von Elementen in einer eindimensionalen Richtung: entweder Zeile oder Spalte. Es führt zwei Kernkonzepte ein, die alles bestimmen: die Hauptachse (die primäre Richtung, in die Elemente fließen, standardmäßig horizontal) und die Querachse (senkrecht zur Hauptachse, standardmäßig vertikal). Sobald Sie Haupt vs. Quer verinnerlicht haben, ordnet sich jede Flexbox-Eigenschaft einer der beiden zu: justify-content arbeitet auf der Hauptachse, align-items arbeitet auf der Querachse, flex-direction tauscht die Achsen.

Flexbox löste eine Reihe von Layout-Problemen, die Webentwickler von 1998 bis 2014 plagten. Vor Flexbox erforderte das vertikale Zentrieren eines Elements Hacks (display: table-cell, negative Margins, position: absolute mit translate-Transforms). Gleich hohe Spalten erforderten die «Faux Columns»-Technik mit Hintergrundbildern. Sticky Footers brauchten exakte Pixel-Berechnungen. Flexbox machte all das trivial: eine einzeilige Deklaration ersetzt Jahrzehnte von CSS-Umwegen. Der Kompromiss ist, dass Flexbox eindimensional ist; für zweidimensionale Layouts (Zeile UND Spalte gleichzeitig) ist CSS Grid (2017 ausgeliefert) das bessere Werkzeug.

Flexbox-Eigenschaften teilen sich sauber in zwei Gruppen: Container-Eigenschaften (auf das Elternelement angewendet: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) und Item-Eigenschaften (auf Kinder angewendet: flex-grow, flex-shrink, flex-basis, align-self, order). Die Container-Eigenschaften steuern Layout-Muster; die Item-Eigenschaften steuern individuelle Ausnahmen. Dieser Generator zeigt beide Sätze, damit Sie experimentieren können, wie sie interagieren, ohne Code zu schreiben.

Was im Generator steckt

Die Live-Vorschau ist ein Flex-Container mit Beispiel-Kindelementen. Wenn Sie Container-Eigenschaften (flex-direction, justify-content usw.) per Dropdown und Inputs ändern, aktualisiert JavaScript den Inline-Stil des Vorschau-Containers, und der Browser rendert das Layout neu. Die Vorschau ist die tatsächliche Flexbox-Implementierung des Browsers, keine JavaScript-Simulation: Sie sehen genau, was Ihr CSS auf einer echten Seite produzieren wird.

Pro-Item-Steuerungen lassen Sie jedes Kind individuell anpassen. Sie können Items hinzufügen oder entfernen, deren flex-grow, flex-shrink, flex-basis, align-self und order-Werte setzen und sehen, wie der Container den Raum entsprechend neu verteilt. Visuelle Achsenindikatoren zeigen die Haupt- und Querachsen für die aktuelle Konfiguration und festigen das mentale Modell. Die Eigenschaften sind echtes CSS, das Sie direkt in Ihren Stylesheet kopieren können, ohne Transpilation oder Framework-Präfixe.

Das «Generated CSS»-Panel aktualisiert sich bei jeder Interaktion und erzeugt zwei CSS-Regeln: eine für den Container (mit den gewählten Flex-Eigenschaften) und eine für die Items. Klicken Sie auf «CSS kopieren» und die Regeln werden in Ihre Zwischenablage geschrieben. Das Werkzeug selbst macht nie Netzwerkanfragen; das Vorschau-Rendering, die Code-Generierung und der Clipboard-Schreibvorgang passieren alle in JavaScript auf Ihrem Gerät. Seite neu laden, und Ihre Konfiguration ist weg, sofern Sie das CSS nicht zuerst kopiert haben.

Geschichte und Hintergrund

• CSS-2.1-Layout-Chaos, 1998 bis 2008.Vor Flexbox nutzten Webentwickler float: left mit Clearfix-Hacks, display: inline-block mit Whitespace-Bugs oder display: table mit Table-Cell-Tricks für Layout. Vertikales Zentrieren erforderte vertical-align auf Table-Cells, Negativ-Margin-Tricks oder absolute Positionierung. Gleiche Spalten erforderten JavaScript. Die Web-Community produzierte Tausende Blog-Posts über «wie macht man X mit CSS»-Workarounds.
• Erster Flexible-Box-Entwurf, 2009.Die W3C CSS Working Group veröffentlicht den ersten Working Draft des CSS Flexible Box Layout Module im Juli 2009, mit drei Syntaxen, die sich über die nächsten fünf Jahre entwickeln: die ursprüngliche box-*-Syntax (schnell veraltet), die 2011er flexbox Zwischensyntax (noch in altem IE-10-Code zu sehen) und die finale flex-Syntax, die wir heute nutzen.
• Browser-Support stabilisiert sich, 2014.Chrome 29, Firefox 28, Safari 9 und IE 11 liefern alle bis 2014 funktionierendes Flexbox aus, wobei IE 11 buggy Edge Cases behält. Der Übergang von «Flexbox ist die Zukunft» zu «Flexbox ist die Gegenwart» passiert 2014-2015, als produktive Seiten es für Haupt-Layouts übernehmen. Das «Holy Grail Layout» (Header, Footer, zwei Sidebars, Hauptinhalt) wird trivial.
• Chris Coyiers «A Complete Guide to Flexbox», 2013.CSS-Tricks veröffentlicht Chris Coyiers umfassenden Flexbox-Guide (April 2013), der die kanonische Referenz wird. Bis 2016 ist der Guide unter den Top-Ergebnissen für jede Flexbox-Frage und wird in Dutzende Sprachen übersetzt. Er beschleunigt die Flexbox-Übernahme dramatisch.
• CSS Grid kommt als Ergänzung, 2017.CSS Grid Layout wird in Chrome 57, Firefox 52 und Safari 10.1 (März 2017) ausgeliefert. Statt Flexbox zu ersetzen, ergänzt Grid es: Flexbox glänzt bei eindimensionalen Zeilen-/Spalten-Layouts, Grid glänzt bei zweidimensionalen Layouts. Moderne Designs nutzen typischerweise beides: Grid für die Seitenstruktur, Flexbox für komponenten-interne Anordnungen (Nav-Items, Button-Gruppen, Karten-Inhalte).
• gap-Eigenschaft und Subgrid kommen, 2020 bis 2024.Die gap-Eigenschaft (ursprünglich nur Grid) wird Flexbox-kompatibel in allen großen Browsern bis Safari 14.1 (April 2021). Die sauberere gap: 1rem-Syntax ersetzt die älteren «Margin auf jedem Kind außer dem letzten»-Muster. CSS Subgrid (2023+) lässt verschachtelte Grids mit Eltern-Grid-Tracks ausrichten, nützlich für Komponenten-System-Layouts.

Praktische Workflows

• Navigationsleisten.Eine horizontale Navigation mit Logo links und Links rechts ist der kanonische Flexbox-Anwendungsfall. display: flex; justify-content: space-between; align-items: center; am Nav-Container, und fertig. Fügen Sie gap: 1.5rem für Abstand zwischen Links hinzu. Dieses 4-zeilige CSS ersetzt, was früher Floats, Clearfix und pixelgenaue Margin-Mathematik erforderte.
• Vertikales und horizontales Zentrieren.Die klassische «wie zentriere ich diesen Div?»-Frage hat eine Flexbox-Antwort: display: flex; justify-content: center; align-items: center; am Elternelement. Funktioniert unabhängig von der intrinsischen Größe des Kinds, unabhängig von der Höhe des Elternelements, unabhängig von dynamischen Inhaltsänderungen. Das ist die größte Lebensqualitätsverbesserung, die Flexbox der Webentwicklung gebracht hat.
• Kartenlisten-Layouts mit Umbruch.Eine Kartenreihe, die auf schmalen Bildschirmen auf mehrere Reihen umbricht: display: flex; flex-wrap: wrap; gap: 1rem; am Container, und flex: 1 1 250px auf jeder Karte. Karten wachsen, um den verfügbaren Raum zu füllen, schrumpfen auf 250px Minimum und brechen auf neue Reihen um, wenn 250px nicht passen. Responsive Design ohne Media Queries.
• Formular-Reihen mit beschrifteten Inputs.Formulare brauchen oft ausgerichtete Labels und Inputs: display: flex; gap: 0.5rem; in der Reihe, flex: 0 0 120px am Label (feste 120px-Breite), flex: 1 am Input (füllt den restlichen Raum). Größenänderung des Formular-Containers hält das Label fest und streckt den Input. Einfacher als CSS Grid für zweispaltige Formular-Reihen.
• Sticky Footer.Den Footer am unteren Rand des Viewports kleben lassen, wenn der Inhalt kurz ist, aber dem Inhalt folgen, wenn er lang ist: body { display: flex; flex-direction: column; min-height: 100vh; } mit main { flex: 1 } schiebt den Footer nach unten. Das klassische «Sticky Footer»-Problem in drei CSS-Deklarationen gelöst, ersetzt die Negativ-Margin-Workarounds der 2010er.
• Tag- und Badge-Gruppen.Listen von Tags, Chips oder Badges, die horizontal fließen und auf neue Zeilen umbrechen sollen: display: flex; flex-wrap: wrap; gap: 0.5rem;. Jeder Tag bemisst sich selbst, und der Container handhabt die Anordnung. Stark genutzt in Filter-UIs, Content-Tagging, Such-Interfaces. Kombiniert gut mit dem :has()-Selektor für zustandsabhängiges Styling.

Haeufige Fallstricke

• Die min-width: auto Falle.Flex-Items haben ein implizites min-width: auto (oder min-height: auto für Spaltenrichtungen), das sie davon abhält, unter die intrinsische Mindestgröße ihres Inhalts zu schrumpfen. Das lässt overflow: hidden- und Text-Truncation-Muster in Flex-Containern unerwartet versagen. Fix: explizit min-width: 0 am problematischen Flex-Item setzen. Das ist die mit Abstand häufigste «warum ist mein Flex-Layout kaputt?»-Ursache.
• flex-basis vs. width Verwirrung.flex-basis ist die initiale Größe eines Flex-Items entlang der Hauptachse, vor Wachstums-/Schrumpf-Berechnungen. width (oder height für Spaltenrichtungen) ist die reguläre CSS-Größe. Wenn beides gesetzt ist, gewinnt flex-basis. Die Kurzform flex: 1 1 200px setzt flex-basis auf 200px. Für die meisten Fälle in Flex-Containern flex-basis statt width für Klarheit bevorzugen.
• gap-Support in älteren Browsern.Die gap-Eigenschaft war ursprünglich nur Grid und kam in Flexbox später: Safari 14.1 (April 2021), früher in Chrome/Firefox. Für Projekte, die älteres Safari (oder älteres WebView in iOS-Apps) unterstützen, Fallbacks mit Margins auf Kindern bereitstellen. Die meisten modernen Projekte können gap sicher nutzen; prüfen Sie Ihre spezifischen Browser-Support-Ziele.
• Standard flex-shrink kann unerwartete Größenanpassung verursachen.Flex-Items haben Standard flex-shrink: 1, was bedeutet, sie können unter ihre deklarierte Breite schrumpfen, wenn der Container zu schmal ist. Um ein Element bei seiner deklarierten Breite zu halten, unabhängig vom verfügbaren Raum, flex-shrink: 0 setzen. Häufig bei Sidebars, die 250px breit bleiben sollen, auch wenn der Hauptinhaltsbereich sie drückt: flex: 0 0 250px statt flex-basis: 250px.
• Prozent-flex-basis ist relativ zum Container.flex-basis: 50% bedeutet «50 % der Hauptachsen-Größe des Flex-Containers». Das funktioniert für typische Layouts, interagiert aber seltsam mit flex-wrap: wenn der Container selbst eine prozentbasierte Hauptachsen-Größe in einem verschachtelten Flex-Kontext hat, summiert sich die Mathematik. Im Zweifelsfall Pixelwerte oder min()/max()/clamp() für flex-basis statt Prozent verwenden.
• IE 11 Flexbox hat buggy Edge Cases.Internet Explorer 11 (Juni 2022 zurückgezogen) implementierte Flexbox mit mehreren Bugs: min-height nicht respektiert, defekte verschachtelte Flex-Container, flex: 1 behandelt manchmal flex-basis als 0px statt 0%, die «two-value flex»-Kurzform inkonsistent behandelt. Für Projekte, die IE nicht mehr unterstützen, ignorieren. Für Legacy-Enterprise-Software gründlich testen oder alternative Layout-Ansätze nutzen.

Datenschutz und Datenverarbeitung

CSS-Lern- und Layout-Werkzeuge kommen in zwei Geschmacksrichtungen: einfache HTML-Seiten, die clientseitiges JavaScript ausführen (privat, schnell, kein Setup) und Cloud-Editoren mit gespeicherten Projekten (kollaborativ aber mit Datenschutz-Kompromissen). Dieses Werkzeug ist die erste Art. Ihre Eigenschafts-Auswahlen, Ihre Item-Konfigurationen, Ihr generiertes CSS: alles bleibt in Ihrer Browser-Sitzung. Seite neu laden und der Zustand ist weg, sofern Sie das CSS nicht zuerst kopiert haben.

Die Datenschutz-Einsätze sind hier gering, weil Flexbox-Konfigurationen selten sensible Informationen enthalten. Trotzdem zählt das Fehlen von Analytics: Sie können frei experimentieren, ohne dass Ihr Trial-and-Error-Prozess aufgezeichnet wird. Besonders nützlich in Klassenzimmern oder Unternehmens-Schulungen, wo das Anmelden von Schülern oder Auszubildenden auf Drittanbieter-Plattformen ein Reibungspunkt ist. Das Werkzeug ist eine einzelne statische Seite ohne Backend, in jedem Browser nutzbar, auch auf abgeschotteten Unternehmens-Maschinen.

Wann Flexbox nicht zu verwenden ist

• CSS Grid für zweidimensionale Layouts.Flexbox ist eindimensional; wenn Sie Items in Zeilen und Spalten gleichzeitig ausrichten müssen (z.B. ein Magazin-Layout mit gemischtgroßen Karten), ist CSS Grid dramatisch besser geeignet. Nutzen Sie unseren CSS Grid Generator für diese Art von Arbeit. Beide arbeiten gut zusammen: Grid für die Seitenstruktur, Flexbox für komponenten-interne Anordnungen.
• HTML-Tabellen für tabellarische Daten.Wenn Ihre Daten tatsächlich eine Tabelle sind (Zeilen repräsentieren Datensätze, Spalten Felder), nutzen Sie ein echtes <table>-Element mit <tr> und <td>. Tabellen bieten semantische Bedeutung für Screenreader, sortierbare Header und eingebaute Ausrichtung. Flexbox/Grid für Tabellen ist ein Antipattern aus der 2010er-Ära; moderne Barrierefreiheits-Leitlinien empfehlen explizit semantische HTML-Tabellen für tabellarische Daten.
• position: absolute für Overlays und Tooltips.Modal-Overlays, Tooltips, Dropdown-Menüs und ähnliche schwebende UI-Elemente funktionieren am besten mit position: absolute oder position: fixed statt Flexbox. Flex/Grid verwalten den Layout-Fluss; absolute Positionierung hebt Elemente komplett aus dem Fluss. Kombinieren Sie sie: Flexbox für das Hauptseiten-Layout, absolute Positionierung für das Modal, das es überlagert.
• CSS Subgrid für verschachtelte Ausrichtung.Wenn verschachtelte Layouts mit dem Parent-Grid ausgerichtet werden müssen (z.B. Karten-Titel, die über ein Karten-Grid hinweg ausgerichtet sind), ist CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) angemessener als verschachteltes Flexbox. Subgrid lässt Kinder Grid-Tracks vom Parent erben und sichert perfekte Ausrichtung über verschachtelte Strukturen. Lohnenswert für Design-System-Komponentenarbeit.

Mehr Fragen

Was bedeutet die flex-Kurzform genau?

Die flex-Kurzform setzt drei Eigenschaften auf einmal: flex: <grow> <shrink> <basis>. Übliche Werte: flex: 1 (1, 1, 0%) für gleich verteilte Items, flex: 0 0 auto für fix dimensionierte Items, flex: 1 1 250px für Items, die ab einem 250px Startpunkt wachsen/schrumpfen. Die Kurzform hat spezielle Anfangswerte, wenn nur ein oder zwei Werte angegeben werden; die explizite Drei-Wert-Form vermeidet Überraschungen.

Wie bringe ich Items dazu, auf mehrere Zeilen umzubrechen?

Setzen Sie flex-wrap: wrap am Container. Items fließen auf eine neue Zeile über, wenn sie nicht passen. Kombinieren Sie mit flex-basis auf Items, um zu kontrollieren, wie viele pro Zeile passen: flex: 1 1 200px erstellt ein responsives Grid, wo Items mindestens 200px sind, wachsen, um den restlichen Raum zu füllen, und auf schmalen Bildschirmen auf neue Zeilen umbrechen. Die Container-gap-Eigenschaft handhabt Abstände zwischen umbrochenen Zeilen und Items.

Kann ich die Reihenfolge der Flex-Items umkehren?

Ja, mehrere Wege. Container-Ebene: flex-direction: row-reverse (oder column-reverse) kehrt alle Items in der Reihenfolge um. Item-Ebene: die order-Eigenschaft weist numerische Gewichte zu; Items mit niedrigeren Zahlen erscheinen zuerst. Standardreihenfolge ist 0; order: -1 auf einem Item bewegt es nach vorne. Barrierefreiheits-Hinweis: visuelles Neuordnen beeinflusst nicht die Tab-Reihenfolge oder Screenreader-Lesereihenfolge, was Tastatur- und Hilfstechnologie-Nutzer verwirren kann. Sparsam verwenden.

Was ist der Unterschied zwischen align-items und align-content?

align-items richtet Items innerhalb ihrer Zeile (oder Spalte) entlang der Querachse aus. align-content richtet die Zeilen (oder Spalten) selbst innerhalb des Containers aus, nur sinnvoll, wenn es mehrere umbrochene Zeilen gibt. Wenn flex-wrap auf nowrap (Standard) gesetzt ist, hat align-content keinen Effekt, weil es nur eine Zeile gibt. Verwenden Sie align-items für Einzeilen-Ausrichtung, align-content für Mehrzeilen-Ausrichtung.

Wie zentriere ich ein einzelnes Element mit Flexbox?

Die klassische Antwort: display: flex; justify-content: center; align-items: center; am Parent-Container. Das zentriert das Kind sowohl horizontal als auch vertikal. Nur für horizontal: nur justify-content: center verwenden. Nur für vertikal: nur align-items: center verwenden. Wenn Sie innerhalb eines Parents unbekannter Höhe zentrieren müssen, fügen Sie min-height: 100vh am Parent hinzu, damit er vertikalen Raum zum Zentrieren hat. Das gesamte Muster ersetzt 20 Jahre CSS-Zentrier-Workarounds.

Warum funktioniert meine Text-Truncation nicht in einem Flex-Container?

Wegen des min-width: auto-Standards auf Flex-Items. Text-overflow: ellipsis erfordert, dass das Element seinen Container tatsächlich überläuft; mit der Standard-Mindestbreite auf die intrinsische Inhaltsgröße gesetzt, läuft das Element nie über. Fix: min-width: 0 am Flex-Item mit dem zu kürzenden Text hinzufügen. Das ist die häufigste Flexbox-Bug Stack-Overflow-Antwort: «flex text-overflow ellipsis not working» liefert Tausende Versionen genau dieser Antwort.