CSS-Flexbox-Generator

Ein kostenloses Tool, um Flexbox-Layouts durch Anpassen von flex-direction, justify-content, align-items, flex-wrap und gap in einer Live-Vorschau auszuprobieren. Den generierten CSS-Code mit einem Klick kopieren.

Zuletzt aktualisiert: 2026-09-20

Eine Flexbox-Anordnung von Hand aufbauen

Flexbox ist jenes Anordnungsverfahren, das Elemente entlang einer einzigen Achse aufreiht. Dieses Werkzeug lässt Sie `flex-direction`, `justify-content`, `align-items`, `flex-wrap` und `gap` am Bildschirm umschalten, das Ergebnis dabei verfolgen und das fertige CSS unmittelbar herauskopieren.

**Nahezu jede Schwierigkeit mit Flexbox läuft auf die Frage hinaus, in welche Richtung `justify-content` und `align-items` wirken.** Das erste regelt die Anordnung entlang der **Hauptachse**, das zweite entlang der **Querachse**. Unangenehm daran ist, dass **in dem Augenblick, in dem Sie `flex-direction` von `row` auf `column` ändern, diese beiden Achsen die Plätze tauschen.** Das `justify-content`, das die Waagerechte besorgte, solange die Elemente nebeneinanderstanden, besorgt nach dem Stapeln die Senkrechte. Die meisten Klagen, etwas lasse sich „nicht zentrieren", laufen darauf hinaus, **nicht bemerkt zu haben, dass die zu ändernde Eigenschaft gewechselt hat.**

So gehen Sie vor

Beginnen Sie mit einer Vorlage Gängige Anordnungen wie Zentrieren, Auseinanderziehen und Stapeln liegen bereit.
Schalten Sie flex-direction um **Der Wechsel zwischen `row` und `column` macht den Tausch der Achsen sichtbar.**
Probieren Sie die Ausrichtungseigenschaften Ändern Sie `justify-content` und `align-items` nacheinander und bestätigen Sie deren Verhalten.
Kopieren Sie das erzeugte CSS Befriedigt die Anordnung, lässt sie sich unmittelbar in Ihren Quelltext einfügen.

Tipps für die Nutzung

justify-content richtet Elemente entlang der "Hauptachse" aus, align-items entlang der "Querachse". Wird flex-direction auf column gesetzt, dreht sich die Hauptachse in die vertikale Richtung, sodass sich die sichtbare Wirkung dieser beiden Eigenschaften vertauscht.
Das Preset "Zentriert" kombiniert justify-content: center mit align-items: center und ist damit die gängigste Methode, ein Element mit Flexbox sowohl horizontal als auch vertikal zu zentrieren.
Die gap-Eigenschaft fügt Abstand nur zwischen den Elementen ein, nicht am Rand des Containers, und erzeugt so – anders als margin – einen gleichmäßigen Abstand zwischen benachbarten Elementen, ohne die Ränder zu beeinflussen.
Wird align-self für ein einzelnes Element gesetzt, überschreibt es das align-items des Containers nur für dieses Element – praktisch, wenn ein Element abweichend von den anderen ausgerichtet werden soll.
Mit flex-wrap: wrap springen Elemente, die nicht mehr in die Breite des Containers passen (bzw. im Spaltenmodus in die Höhe), automatisch in die nächste Zeile – eine gängige Technik für responsive Kartenlayouts.

Wofür Sie es nutzen können

Um eine Navigationsleiste zusammenzusetzen

**Das Zeichen links und das Menü rechts ist der klassische Fall für `justify-content: space-between`.**

Um Karten gleichmäßig zu verteilen

`gap` erspart Ihnen den Kunstgriff, `margin` zugunsten gleichmäßiger Abstände wieder aufzuheben.

Um ein Element in beiden Richtungen zu zentrieren

**`justify-content` und `align-items` beide auf `center` zu setzen ist der kürzeste Weg.**

Um Flexbox zu erlernen

Einen Wert zu ändern und das Ergebnis zu betrachten lehrt es schneller als jede Lektüre.

Begriffe zu Flexbox

Hauptachse: Die Richtung, entlang derer die Elemente aufgereiht werden, von `flex-direction` festgelegt. **Bei `row` verläuft sie waagerecht, bei `column` senkrecht.**
Querachse: Die zur Hauptachse rechtwinklige Richtung. **Tauscht die Hauptachse, so tauscht diese mit.**
Justify-content: Regelt die Anordnung **entlang der Hauptachse** und bietet Zentrieren, Auseinanderziehen, gleichmäßiges Verteilen und Weiteres.
Align-items: Regelt die Anordnung **entlang der Querachse**. Unter dem voreingestellten `stretch` wachsen die Kinder auf die volle Höhe.
Flex-wrap: Entscheidet, ob nicht passende Elemente in eine neue Zeile rücken. Bei `nowrap` werden sie stattdessen zusammengedrückt.
Gap: Der Abstand zwischen den Elementen. **Anders als `margin` fügt er an den Außenrändern keinen überzähligen Raum hinzu.**

Häufig gestellte Fragen

justify-content steuert die Ausrichtung entlang der "Hauptachse" von Flexbox (die durch flex-direction festgelegte Richtung, standardmäßig horizontal), während align-items die Ausrichtung entlang der dazu senkrechten "Querachse" steuert. Bei flex-direction: row verläuft die Hauptachse horizontal, sodass justify-content die horizontale und align-items die vertikale Platzierung übernimmt – wechselt man jedoch zu flex-direction: column, dreht sich die Hauptachse in die Vertikale, und die beiden Eigenschaften tauschen ihre Rollen.

Steht flex-direction auf column, verläuft die Hauptachse vertikal, sodass justify-content: center die Elemente vertikal zentriert. Um sie zusätzlich horizontal (auf der Querachse) zu zentrieren, verwendet man align-items: center. Zusammen lassen sich Inhalte so auch in einem gestapelten Spaltenlayout in beide Richtungen zentrieren.

Die Unterstützung von gap in Flexbox kam in Chrome und Safari erst um 2021 herum vollständig an, wird aber inzwischen von allen gängigen Browsern unterstützt (Chrome 84+, Safari 14.1+, Firefox 63+). Muss man sehr alte Browser unterstützen, sollte man margin als Alternative in Betracht ziehen.

flex-grow legt fest, wie stark sich ein Element ausdehnt, um überschüssigen Platz im Container zu füllen, während flex-shrink festlegt, wie stark sich ein Element verkleinert, wenn der Container zu schmal ist, um alle Elemente in ihrer ursprünglichen Größe unterzubringen. Beide Eigenschaften verteilen den Überschuss bzw. das Defizit ausgehend von der Basisgröße des Elements (flex-basis).

Flexbox eignet sich in der Regel am besten für Anordnungen entlang einer einzigen Richtung (einer Zeile oder Spalte), etwa eine Navigationsleiste oder eine Reihe von Karten. CSS Grid hingegen ist für die gleichzeitige Steuerung von Zeilen und Spalten in einem echten zweidimensionalen Layout gedacht, etwa das Raster einer ganzen Seite. Als Faustregel gilt: Flexbox für einfache lineare Anordnungen, Grid für komplexere gitterartige Strukturen.

Übrigens – Wie Flexbox die Geschichte des CSS-Layouts veränderte

Bevor es CSS Flexbox (offiziell CSS Flexible Box Layout Module) gab, wurden horizontale Layouts im Web meist mit der float-Eigenschaft umgesetzt. Doch float war ursprünglich dafür gedacht, Text um ein Bild fließen zu lassen, nicht für Layouts – die Verwendung dafür erforderte daher viele Workarounds, allen voran den berühmten "Clearfix"-Trick, um zu verhindern, dass die Höhe eines Elternelements kollabiert.

Flexbox, dessen erster Entwurf 2009 vom W3C veröffentlicht wurde, wurde speziell für eindimensionale Layouts entwickelt. Aufgaben, die zuvor mehrere Zeilen CSS-Tricks mit float erforderten – Elemente entlang der Hauptachse strecken, Platz gleichmäßig verteilen oder Inhalte vertikal zentrieren – ließen sich fortan mit einer einzigen deklarativen Eigenschaft wie justify-content oder align-items ausdrücken.

Als die wichtigsten Browser Flexbox um 2015 vollständig implementiert hatten, wurde es rasch zur Standardmethode für gängige Webdesign-Muster wie Navigationsleisten, Kartenlayouts und die Ausrichtung von Formularen. Besonders begrüßt wurde damals von der Front-End-Entwickler-Community, dass die vertikale Zentrierung – lange als eines der kniffligsten Probleme von CSS bekannt – endlich eine unkomplizierte Lösung fand.

Heute existiert Flexbox neben CSS Grid, das auf zweidimensionale Layouts spezialisiert ist, wobei beide unterschiedliche Rollen übernehmen: Flexbox für die Anordnung von Komponenten entlang einer einzigen Richtung, Grid für die Strukturierung der gesamten Seite als Raster.

Alle Wissenstexte ansehen