Flexbox-Spielwiese

Flexbox Playground

Schaltet jede Flex-Eigenschaft an einem Live-Beispiel um und zeigt das CSS und was jede Eigenschaft geändert hat.

Jede Flexbox-Eigenschaft an einem lebenden Beispiel, mit einer Zeile unter jedem Bedienelement, die sagt, was sie tatsächlich tut. Die Vorschau ist das Flex-Layout des Browsers selbst, und das CSS ist dieser Zustand aufgeschrieben, was Sie sehen, ist also, was Ihre Seite tun wird.

🔒 Läuft vollständig in Ihrem Browsercssflexboxlayoutlearn

Vorschau

Höhe

Klicken Sie ein Element an, um rechts seine eigenen Eigenschaften zu ändern.

Container

flex-directionDie Richtung der Hauptachse. Mit row liegen die Elemente waagerecht, mit column senkrecht; -reverse dreht die Reihenfolge um.flex-wrapOb Elemente in eine neue Zeile rutschen, wenn sie nicht passen. Mit nowrap schrumpfen sie stattdessen, so klein das auch wird.justify-contentWie der freie Platz auf der Hauptachse verteilt wird. space-between heftet die Enden fest; space-evenly macht alle Abstände gleich.align-itemsWo die Elemente auf der Querachse sitzen. Der Standard ist stretch, und deshalb füllt ein Element ohne Höhe den Container aus.align-contentWie der Block aus Zeilen auf der Querachse platziert wird, wenn es mehr als eine gibt. Bei einer einzigen Zeile tut er gar nichts.gap: 12pxDer Abstand zwischen den Elementen. Anders als margin taucht er an den Außenkanten nicht auf.

Element 1

flex-grow: 0Der Anteil am freien Platz, den dieses Element bekommt. Alle auf 1 teilen ihn gleichmäßig; eines auf 2 bekommt doppelt so viel.flex-shrink: 1Wie viel dieses Element abgibt, wenn der Platz nicht reicht. Bei 0 schrumpft es nicht, sondern läuft über.flex-basisDie Ausgangsgröße, bevor gewachsen oder geschrumpft wird. auto ist die Inhaltsgröße; 0 ignoriert den Inhalt und teilt allein nach grow.align-selfÜberschreibt align-items für dieses eine Element.order: 0Die Anzeigereihenfolge — der kleinere Wert kommt zuerst, gleiche Werte behalten die Reihenfolge des Markups. Screenreader und Tab-Reihenfolge richten sich nach dem Markup, seien Sie also vorsichtig.Inhalt

Code

.container {
  display: flex;
  gap: 12px;
}

· Die Hauptachse verläuft waagerecht.
· Alle flex-grow stehen auf 0, also verteilt justify-content den freien Platz.

Eigenschaften, die auf ihrem Standardwert stehen, werden nicht ausgegeben. Es erscheint nur, was Sie geändert haben.

Die Vorschau ist die Flexbox des Browsers selbst, und das CSS ist dieser Zustand aufgeschrieben — was Sie hier sehen, tut die Seite also auch. Für ein zweidimensionales Layout gehen Sie zu dem CSS-Grid-Builder.

So funktioniert es

Setzen Sie die Container-Eigenschaften
Richtung, Umbruch und die drei Ausrichtungseigenschaften. Jede hat einen Satz darunter, der erklärt, was sie ändert – `align-content` insbesondere tut bei einer einzelnen Zeile überhaupt nichts.
Klicken Sie ein Element an, um es zu bearbeiten
Grow, shrink, basis, align-self und order gelten für ein Element. Fügen Sie Elemente hinzu und entfernen Sie welche, um zu sehen, wie der Container neu verteilt.
Lesen Sie die Hinweise und kopieren Sie das CSS
Das Panel beschreibt, was Ihr aktuelles Layout tatsächlich tun wird, und die Ausgabe lässt jede Eigenschaft weg, die noch auf ihrem Standardwert steht – was Sie kopieren, ist also nur, was Sie geändert haben.

Häufige Fragen

Warum läuft mein Element über, statt zu schrumpfen?

Entweder `flex-shrink: 0`, oder ein Kind mit einer Mindestinhaltsgröße. Die `min-width` eines Flex-Elements ist standardmäßig `auto`, was bedeutet, dass es nicht unter seinen Inhalt schrumpft – eine lange ununterbrochene Zeichenkette oder ein breites Bild ist der übliche Übeltäter. `min-width: 0` ist die Lösung.

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

`align-items` platziert jedes Element auf der Querachse. `align-content` platziert den *Block der Zeilen*, wenn der Umbruch mehr als eine erzeugt hat – mit `nowrap` oder mit einer einzelnen Zeile tut es also überhaupt nichts. Das ist die häufigste Quelle von „diese Eigenschaft ist kaputt“.

Sollte ich `order` verwenden, um Dinge umzuordnen?

Sparsam. Es ändert die visuelle Reihenfolge und nicht die DOM-Reihenfolge, Screenreader und Tab-Reihenfolge folgen also weiterhin dem Markup. Ein Tastaturnutzer, der durch ein visuell umgeordnetes Layout tabbt, springt über den Bildschirm – und deshalb nennt die Spezifikation es einen letzten Ausweg.

Flexbox oder Grid?

Flexbox für eine Dimension – eine Reihe von Buttons, eine Werkzeugleiste, das Innere einer Karte. Grid, wenn Zeilen und Spalten miteinander fluchten müssen. Wenn Sie Flex-Container verschachteln, um ein Grid vorzutäuschen, wollen Sie ein Grid.

Eingabe aus

CSS-Grid-Builder

CSS Grid Builder

Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.

Läuft vollständig in Ihrem Browser

Danach

Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.

Fluid-Size-Rechner

Fluid Size Calculator

Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.

Läuft vollständig in Ihrem Browser

CSS formatieren und minimieren

CSS Beautifier & Minifier

Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.

Läuft vollständig in Ihrem Browser

CSS-Grid-Builder

CSS Grid Builder

Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.

Läuft vollständig in Ihrem Browser

Farbformat-Konverter

Colour Format Converter

Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.

Läuft vollständig in Ihrem Browser

Farbwähler

Colour Picker

Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.

Läuft vollständig in Ihrem Browser

Kontrast prüfen

Contrast Checker

Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.

Läuft vollständig in Ihrem Browser