Entwickler-Tool

CSS-Flexbox-Playground

CSS Flexbox visuell lernen und experimentieren. Container-Eigenschaften anpassen, Items in Echtzeit reagieren sehen und das generierte CSS kopieren.

100% kostenlos — kein Konto erforderlich

Container-Steuerung
Element-Steuerung

Element 1

Element 2

Element 3

Vorschau
1
2
3
4
Generiertes CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Visuelles Flexbox-Lernen

Interaktiv mit Flex-Eigenschaften experimentieren

Container-Steuerung

Direction, justify-content, align-items, wrap und gap — alles einstellbar.

Live-Vorschau

Farbige Flex-Items in Echtzeit auf Ihre Änderungen reagieren sehen.

5 Layout-Vorlagen

Zentriert, Navbar, Sidebar, Grid-ähnlich und Footer-Layouts.

CSS kopieren

Generiertes CSS für den Container, bereit zur Verwendung in Ihrem Projekt.

Häufig gestellte Fragen

Entwickler-Tools

Weitere CSS-Werkzeuge

CSS-Gradient, Box-Shadow, Tailwind-Konverter und mehr.