CSS-Flexbox-Generator

Ein Flexbox-Layout hat zwei getrennte Regelwerke – Eigenschaften am Container (flex-direction, justify-content, align-items, flex-wrap, gap) und Eigenschaften an jedem Kind (flex-grow, flex-shrink, flex-basis) – und sie durcheinanderzubringen ist die häufigste Ursache für „Warum zentriert/wächst/umbricht das nicht so, wie ich es erwarte?“-Fehler. Dieser Generator zeigt beide Regelwerke gleichzeitig auf dem Bildschirm: Ändern Sie eine Container-Einstellung oder die Felder eines Kindes, und drei nummerierte, farbcodierte Boxen aktualisieren sich sofort, sodass Ursache und Wirkung sichtbar bleiben.

Die Container-Seite deckt jede Layoutachse ab: Wählen Sie eine Richtung, bestimmen Sie mit justify-content, wie die Kinder entlang der Hauptachse verteilt werden, richten Sie sie auf der Querachse aus, entscheiden Sie, ob sie in neue Zeilen umbrechen, und setzen Sie einen Gap statt Margin-Hacks zwischen ihnen. Die Kindseite ist ebenso realitätsnah: Fügen Sie Boxen bis acht hinzu, entfernen Sie sie bis auf zwei, und geben Sie jeder ihre eigenen flex-grow-, flex-shrink- und flex-basis-Werte – der Generator gibt nur dann eine CSS-Regel pro Kind aus, wenn mindestens einer dieser Werte vom Browser-Standard abweicht, sodass der kopierte Code sich niemals mit flex-grow: 0 auf Boxen aufbläht, die es nicht brauchen.

Voreingestellte Seiten führen direkt zu den Layouts, nach denen tatsächlich namentlich gesucht wird: wie man ein Div zentriert (die am häufigsten gestellte CSS-Layout-Frage, gelöst mit justify-content und align-items, beide auf center gesetzt), eine Navbar mit Logo links und Links rechts, gleich breite flexible Spalten per flex-grow und ein direkter Vergleich von space-between mit seinen engen Verwandten space-around und space-evenly.

Wie jedes Tool auf dieser Seite ist der Generator kostenlos und läuft vollständig in Ihrem Browser: kein Upload, kein Account, und er funktioniert offline weiter, sobald die Seite geladen ist.