CSS-Flexbox-Spielwiese
Lernen und experimentieren Sie mit CSS Flexbox. Passen Sie Container-Eigenschaften an und beobachten Sie, wie sich das Layout live ändert. Ideal zum Lernen und für schnelles Prototyping.
Funktionen
Anleitung
1. Passen Sie Container-Eigenschaften an (direction, wrap, justify-content, align-items).
2. Fügen Sie Flex-Elemente hinzu oder entfernen Sie sie.
3. Sehen Sie die Layout-Änderungen live und kopieren Sie den CSS-Code.
Über dieses Werkzeug
Flexbox ordnet Elemente entlang einer Achse an – einer Zeile oder einer Spalte – und verteilt den Platz zwischen ihnen. Die Schwierigkeit: Mehrere Eigenschaften greifen ineinander. flex-direction legt die Hauptachse fest, justify-content richtet die Elemente entlang dieser Achse aus, align-items quer dazu, flex-wrap entscheidet, ob sie in eine neue Zeile umbrechen, und gap sorgt für gleichmäßige Abstände. In diesem Playground ändern Sie jede Eigenschaft und sehen sofort, wie sich farbige Boxen neu anordnen – der schnellste Weg, ein Gefühl dafür zu entwickeln oder ein widerspenstiges Layout zu debuggen. Fügen Sie Elemente hinzu oder entfernen Sie welche, um den Umbruch zu testen, und kopieren Sie dann das erzeugte CSS für den Container. Für zweidimensionale Layouts, in denen Zeilen und Spalten fluchten müssen, ist CSS Grid meist das bessere Werkzeug.