Flexbox-Generator
Stellen Sie einen Flexbox-Container live ein und kopieren Sie das fertige CSS.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Flexbox ohne Raten meistern
Wählen Sie Richtung, Ausrichtung, Umbruch und Abstand: die Vorschau aktualisiert live und das Container-CSS ist kopierbereit.
-
Eigenschaften einstellen
direction, justify, align, wrap, gap.
-
Vorschau beobachten
Nummerierte Elemente reagieren live.
-
CSS kopieren
Auf Ihren Container anwenden.
Das Container-CSS
| Eigenschaft | Rolle |
|---|---|
| display: flex | Aktiviert Flexbox |
| flex-direction | Zeile oder Spalte |
| justify-content | Verteilung (Hauptachse) |
| align-items | Ausrichtung (Querachse) |
| gap | Abstand zwischen Elementen |
Das CSS gilt für das Elternelement; Kinder positionieren sich selbst. Alles wird im Browser generiert.
Häufige Fragen
Wozu dient Flexbox?
Flexbox ist ein CSS-Layoutmodus, um Elemente in einer Zeile oder Spalte auszurichten und zu verteilen. Es regelt Abstände, Zentrierung und Umbruch automatisch, was responsive Layouts stark vereinfacht.
Was ist der Unterschied zwischen justify-content und align-items?
justify-content verteilt Elemente entlang der Hauptachse (horizontal bei row), align-items richtet sie an der Querachse aus (vertikal bei row). Bei column tauschen beide Achsen.
Gilt das erzeugte CSS für den Container oder die Elemente?
Für den Container. Die Eigenschaften (display: flex, justify-content usw.) kommen auf das Elternelement; die Kinder positionieren sich automatisch. Die Vorschau zeigt nummerierte Elemente.
Was macht flex-wrap?
Standardmäßig (nowrap) bleiben Elemente in einer Zeile und schrumpfen bei Bedarf. Mit wrap rücken sie in die nächste Zeile, wenn der Platz fehlt — nützlich für fließende Raster.