Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Mehr erfahren

Tools · CSS · Flexbox-Spielwiese

Flexbox-Spielwiese

Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

So funktioniert es

  1. Wähle eine Vorlage, oder starte mit der Standardreihe.

  2. Passe die Container-Einstellungen an, wähle dann ein Element aus, um dessen eigenes Wachstum, Schrumpfung und Basis einzustellen.

  3. Kopiere den erzeugten CSS-Code.

Häufige Fragen

Nein. Das Layout und der erzeugte CSS-Code werden vollständig in deinem Browser erstellt.

Nur Werte, die vom CSS-Standard abweichen, werden ausgegeben, genau wie es ein Entwickler von Hand tun würde - ein unverändertes Element fügt dem Ergebnis nichts hinzu.

Diese Eigenschaft wirkt sich nur auf einen umbrochenen, mehrzeiligen Container aus. Schalte den Umbruch ein, um den Effekt zu sehen.

Ja, und das ist korrekt. flex-direction: row kehrt sich unter RTL automatisch um, ganz ohne zusätzlichen Code - dieses Tool zeigt echtes Flexbox-Verhalten, keine Annäherung von links nach rechts.

Ähnliche Tools

CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

 CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

 Cubic-Bezier-Easing-Generator

Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.

 Clip-Path-Generator

Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

 Grid-Spielwiese

Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt