Entwickler

Kostenloser CSS-Flexbox-Playground

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

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;
}

Funktionen von Kostenloser CSS-Flexbox-Playground

Interaktiv mit Flex-Eigenschaften experimentieren

Container-Steuerung

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

CSS kopieren

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

5 Layout-Vorlagen

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

Live-Vorschau

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

Häufig gestellte Fragen

Wann sollte ich Flexbox vs Grid verwenden?

Flexbox ist am besten für eindimensionale Layouts (Zeilen ODER Spalten). Grid ist für zweidimensionale Layouts (Zeilen UND Spalten). Viele Layouts verwenden beides.

Was macht flex-wrap?

Standardmäßig bleiben Flex-Items auf einer Zeile und schrumpfen. flex-wrap: wrap erlaubt Items, in die nächste Zeile zu fließen, wenn sie nicht passen.

Was ist der Unterschied zwischen justify-content und align-items?

justify-content richtet Items entlang der Hauptachse aus (horizontal in row, vertikal in column). align-items richtet entlang der Querachse aus (senkrecht dazu).

Gefallen Ihnen unsere kostenlosen Tools?

Weitere CSS-Werkzeuge

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

Alle Tools ansehen