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.
Tipps
- 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.
Häufig gestellte Fragen
Ü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.