Über dieses Tool
Flexbox ist das Rückgrat modernen CSS-Layouts, aber seine Eigenschaften sind schwer zu merken, bis man sie in Aktion gesehen hat. Dieser Generator verwandelt flex-direction, justify-content, align-items, flex-wrap und gap in einfache Steuerelemente, mit einer Reihe echter Elemente, die sich in dem Moment neu anordnen, in dem Sie etwas ändern.
Es ist der schnellste Weg zu verstehen, wie die Eigenschaften zusammenwirken — und wenn das Layout passt, kopieren Sie das Container-CSS. Alles läuft im Browser.
Häufige Fragen
Erzeugt dieses Tool CSS für den Container oder für einzelne Elemente?
Es erzeugt die Flex-Eigenschaften des übergeordneten Containers (flex-direction, justify-content, align-items, flex-wrap, gap) — Eigenschaften pro Element wie flex-grow oder order werden nicht abgedeckt.
Was ist der Unterschied zwischen justify-content und align-items?
justify-content steuert den Abstand entlang der Hauptachse (horizontal bei row-Layout), während align-items die Ausrichtung entlang der Querachse steuert (vertikal bei row-Layout).
Brauche ich in modernen Projekten Vendor-Präfixe für Flexbox?
Nein, alle aktuellen Browser unterstützen Flexbox-Eigenschaften ohne Präfix; die alte -webkit-box / -ms-flexbox-Syntax wird nur von über zehn Jahre alten Browsern benötigt.
Werden meine Layout-Daten irgendwohin hochgeladen?
Nein. Vorschau und generiertes CSS laufen vollständig in Ihrem Browser — es wird nichts an einen Server gesendet.
Warum wirken die gap-Werte in manchen alten Browsern nicht?
Die gap-Eigenschaft in Flex-Containern wird von allen nach 2021 veröffentlichten Browsern unterstützt; verwenden Sie für ältere Browser stattdessen Ränder (margin) an den Elementen.