CSS-Flexbox-Generator
Mit dem CSS Flexbox Generator legst du flex-direction, justify-content, align-items, flex-wrap, align-content und gap für einen Container fest, siehst bis zu 20 Elemente live in der Vorschau und kopierst das erzeugte CSS.
Über dieses Tool
Mit dem CSS Flexbox Generator legst du flex-direction, justify-content, align-items, flex-wrap, align-content und gap für einen Container fest, siehst bis zu 20 Elemente live in der Vorschau und kopierst das erzeugte CSS.
So funktioniert’s
- Wähle Richtung und Umbruch.
- Lege justify-content und align-items fest (und align-content für umbrochene Zeilen).
- Stelle gap und die Anzahl der Vorschau-Elemente ein.
- Klicke auf „CSS kopieren“, um die Container-Regeln zu übernehmen.
Gut zu wissen
- justify-content richtet Elemente entlang der Hauptachse aus, align-items entlang der Querachse.
- flex-direction: column vertauscht die Achsen, justify-content wirkt dann also vertikal.
- align-content wirkt nur, wenn Elemente auf mehrere Zeilen umbrechen.
- Die Eigenschaft gap funktioniert in Flexbox in allen aktuellen großen Browsern.
- Flexbox ist eindimensional; für Zeilen und Spalten gleichzeitig nutze CSS Grid.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie zentriere ich ein div mit Flexbox?
Setze beim Elternelement display: flex; justify-content: center; align-items: center; – das Kindelement wird horizontal und vertikal zentriert.
Was ist der Unterschied zwischen justify-content und align-items?
justify-content verteilt Elemente entlang der Hauptachse (standardmäßig eine Zeile); align-items positioniert sie entlang der Querachse.
Wann sollte ich Flexbox statt Grid verwenden?
Nutze Flexbox für eindimensionale Layouts wie Navigationsleisten und Button-Reihen und Grid für zweidimensionale Seitenlayouts.
Warum bewirkt align-content nichts?
align-content greift nur, wenn flex-wrap erlaubt, dass Elemente auf mehr als eine Zeile umbrechen.