Flexbox-Spielwiese

Alle Werkzeuge

Experimentiere mit CSS-Flexbox-Eigenschaften an Live-Elementen und kopiere das generierte Layout-CSS.

Vorschau Klicke auf ein Element, um es zu bearbeiten
Generiertes CSS
—

Alles läuft in deinem Browser – es wird nichts hochgeladen.

Container
12px
Elemente
0
Ausgewähltes Element

Über Flexbox-Spielwiese

Der Flexbox-Playground ist ein praktischer Sandkasten für CSS-Flexbox. Legen Sie die Container-Eigenschaften fest — flex-direction, flex-wrap, justify-content, align-items, align-content und gap — und beobachten Sie, wie bis zu 12 Live-Elemente in der Vorschau umfließen, sobald Sie einen Wert ändern. So verinnerlichen Sie am schnellsten, was jede Eigenschaft tatsächlich bewirkt.

Elemente sind einzeln bearbeitbar: Klicken Sie eines an, um es auszuwählen, und passen Sie seine flex-grow, flex-shrink, flex-basis, align-self und order an. Zu sehen, wie ein Element wächst, um freien Platz aufzusaugen, während seine Nachbarn ihre Breite behalten, vermittelt das Flex-Größenmodell schneller als jedes Diagramm.

Der Playground generiert sauberes CSS für den Container und alle Elemente mit von der Vorgabe abweichenden Einstellungen — kopieren Sie es direkt in Ihr Stylesheet. Alles läuft in Ihrem Browser, nichts wird hochgeladen, und eine Zurücksetzen-Schaltfläche bringt Sie wieder zu einem sauberen Ausgangspunkt.

So verwenden Sie Flexbox-Spielwiese

  1. Legen Sie die flex-direction, den Umbruch, justify-content, align-items, align-content und gap des Containers fest.
  2. Fügen Sie Elemente hinzu oder entfernen Sie sie — zwischen 2 und 12 —, um Ihre echte Komponente zu spiegeln.
  3. Klicken Sie ein Element an und passen Sie dessen grow, shrink, basis, align-self und order an.
  4. Beobachten Sie, wie sich die Live-Vorschau bei jeder Änderung aktualisiert.
  5. Kopieren Sie das generierte CSS und fügen Sie es in Ihr Projekt ein.

Häufig gestellte Fragen

flex-grow verteilt übrigen Platz: Ein Element mit grow 2 erhält doppelt so viel zusätzlichen Platz wie eines mit grow 1. flex-shrink funktioniert umgekehrt, wenn der Platz knapp ist. Beides sind Verhältnisse zwischen Geschwisterelementen, keine absoluten Größen.

align-items positioniert Elemente entlang der Querachse innerhalb ihrer Zeile. align-content verteilt mehrere umgebrochene Zeilen innerhalb des Containers — es hat nur eine sichtbare Wirkung, wenn flex-wrap mehr als eine Zeile erzeugt.

Jedes Flex-Element hat standardmäßig order 0; Elemente werden von der niedrigsten zur höchsten Reihenfolge angeordnet. Das Ändern der order eines Elements verschiebt es visuell, ohne das HTML anzufassen — die DOM-Reihenfolge und damit die Screenreader-Reihenfolge bleiben gleich.

Ja. Das generierte CSS umfasst die Container-Regeln plus einen Selektor für jedes Element, dessen grow, shrink, basis, align-self oder order von der Vorgabe abweicht, sodass Sie ein vollständiges, funktionierendes Layout einfügen können.

Ja — kostenlos, ohne Anmeldung und vollständig clientseitig. Ihre Experimente verlassen den Browser-Tab nie.
Teilen
Verwandte Tools
E-Mail-Signatur-Editor Erstellen Sie eine professionelle HTML-E-Mail-Signatur aus 30 Vorlagen, passen Sie sie an und speichern Sie sie. Kostenlos
Icon zu PNG Bootstrap Icons, Font Awesome und mehr in benutzerdefinierte PNG-Bilder konvertieren — kostenlos, im Browser. Kostenlos
App-Icon-Generator Erzeugen Sie ein komplettes, veröffentlichungsfertiges App-Icon-Set für App Store und Google Play — hochwertige Verlaufs-, Mesh- und Muster-Hintergründe, aus Ihrem Logo erstellt. Kostenlos
Favicon-Generator Erstellen Sie ein komplettes Favicon-Paket aus einem Logo, einem Schriftsymbol oder einem Monogramm — favicon.ico, moderne PNGs, Apple-Touch-Icon, PWA-Icons, Web-Manifest und HTML-Snippet. Kostenlos
CSS Box-Shadow-Generator Erstellen Sie mehrschichtige CSS Box-Shadows mit Live-Schiebereglern für Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Einfügung – Vorschau auf einem echten Element und fertiges CSS sofort kopieren. Kostenlos
CSS-Border-Radius-Generator Gestalte CSS border-radius visuell mit Live-Vorschau und kopiere produktionsreifen Code. Kostenlos
Beliebte Suchen
flexbox spielwiese css flexbox generator flex container generator justify-content align-items tool css flex layout generator flexbox visualisierer flexbox code generator
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.