CSS-Flexbox-Spielwiese

Das CSS Flexbox Playground ist ein kostenloses Online-Tool, mit dem Sie visuell mit den Eigenschaften von Flexbox-Containern und -Elementen experimentieren können. Es erzeugt Ausgaben in CSS, Tailwind und HTML mit Live-Vorschau und Voreinstellungen für gängige Layouts. Es läuft vollständig in Ihrem Browser, ohne Installation oder Anmeldung.

display:flex ist ein Flex-Container auf Blockebene, der die volle Breite des übergeordneten Elements einnimmt. inline-flex ist auf Inline-Ebene und nimmt nur die Breite seines Inhalts ein, eingebettet in den umgebenden Text.

flex-basis legt die Anfangsgröße fest, bevor der freie Raum verteilt wird. flex-grow definiert, wie der verbleibende freie Raum unter den Elementen aufgeteilt wird.

Übergeordnetes Element: display:flex + justify-content:center + align-items:center. Die Voreinstellung „Zentriert“ wendet genau diese Konfiguration an.

Ja, das CSS Flexbox Playground ist zu 100% kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser und gewährleistet vollständige Privatsphäre.

Absolut. Das CSS Flexbox Playground verarbeitet alles clientseitig in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Ihre Inhalte bleiben jederzeit privat auf Ihrem Gerät.

Ja, das CSS Flexbox Playground ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Sie können es auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffnen Sie einfach das CSS Flexbox Playground in Ihrem Browser und legen Sie sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Das CSS Flexbox Playground unterstützt eine breite Palette beliebter Formate und Sprachen. Die vollständige Liste der unterstützten Optionen finden Sie in der Tool-Oberfläche.

Das CSS Flexbox Playground funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwenden Sie die neueste Version Ihres bevorzugten Browsers.

Diese beiden Eigenschaften bewegen Elemente entlang entgegengesetzter Achsen. justify-content positioniert Elemente entlang der Hauptachse — der Richtung, die durch flex-direction festgelegt wird — und steuert damit die horizontale Verteilung in einer Zeile bzw. die vertikale Verteilung in einer Spalte. align-items positioniert Elemente entlang der Querachse, also der senkrechten Richtung, und regelt somit die vertikale Ausrichtung in einer Zeile bzw. die horizontale in einer Spalte. Deshalb scheinen sich die Rollen der beiden Eigenschaften zu vertauschen, sobald man flex-direction von row auf column umstellt. justify-content bietet Werte wie flex-start, center, space-between, space-around und space-evenly, während align-items stretch, flex-start, flex-end, center und baseline anbietet. Eine einfache Merkregel: justify verteilt Elemente entlang der Linie, align positioniert sie quer dazu nach oben oder unten. In diesem Playground kannst du jede Eigenschaft einzeln umschalten und siehst sofort, wie sich die gestrichelte Vorschau neu anordnet — dadurch wird der Unterschied zwischen Haupt- und Querachse anschaulich, ohne dass du ihn aus der Spezifikation auswendig lernen musst. Anschließend kopierst du das erzeugte CSS oder die Tailwind-Klassen.

Setze den Container auf display:flex mit flex-wrap:wrap, damit Elemente in eine neue Zeile umbrechen, sobald der Platz nicht mehr reicht, und gib jeder Karte eine gemeinsame flex-basis, um ihre Breite vor dem Umbruch festzulegen. Eine Basis wie 200px kombiniert mit flex-grow lässt Karten die Zeile ausfüllen und auf schmalen Bildschirmen auf weniger Spalten umbrechen — ganz ohne Media Queries. Ein gap sorgt zusätzlich für einheitliche Abstände zwischen Zeilen und Spalten. Das Card-Grid-Preset in diesem Playground lädt genau diesen Aufbau — sechs umbrechende Karten mit gemeinsamer flex-basis und 16px gap —, sodass du ein funktionierendes responsives Layout studieren, die Basis oder Anzahl der Elemente anpassen und live beobachten kannst, wie sich die Spalten bei Änderung der Vorschaubreite neu anordnen. Da sich die Karten anhand ihrer Basis und nicht anhand einer festen Spaltenzahl bemessen, passen sich dieselben Regeln von breiten Desktops bis hin zu Smartphones an. Wenn es passt, kopierst du das generierte CSS oder die Tailwind-Klassen direkt in dein Projekt.

flex ist die Kurzschreibweise für drei Eigenschaften in dieser Reihenfolge: flex-grow, flex-shrink und flex-basis. flex: 0 0 240px bedeutet also flex-grow:0 (das Element streckt sich nicht, um zusätzlichen Platz zu füllen), flex-shrink:0 (es schrumpft nicht unter seine Größe, selbst wenn der Platz knapp wird) und flex-basis:240px (seine Startbreite ist fest auf 240px gesetzt). Das Ergebnis ist ein starres Element mit fester Breite — perfekt für eine Sidebar, die konstant 240px breit bleiben soll, während sich der Hauptinhaltsbereich flexibel anpasst. Das Sidebar-Layout-Preset hier verwendet genau diesen Wert für seine feste Spalte neben einem flexiblen Hauptbereich. Im Vergleich dazu entspricht flex: 1 der Auflösung flex-grow:1, flex-shrink:1, flex-basis:0, wodurch ein Element den verfügbaren Platz gierig ausfüllt — also genau das gegenteilige Verhalten. Da der Playground flex-grow, flex-shrink und flex-basis als getrennte Regler pro Element auf jeder Element-Karte bereitstellt, kannst du diese Kurzschreibweise Stück für Stück einstellen, den Effekt in der Live-Vorschau beobachten und den sauberen CSS-Output kopieren.

align-items verändert nur dann etwas, wenn Elemente entlang der Querachse kleiner sind als der Container, weil die Eigenschaft sie innerhalb dieses übrig gebliebenen Platzes positioniert. Zwei häufige Situationen verdecken diesen Effekt. Erstens ist der Standardwert von align-items stretch, wodurch sich Elemente über die gesamte Querachse ausdehnen — sie füllen in einer Zeile also bereits die volle Höhe aus, und es bleibt keine Lücke zum Ausrichten. Zweitens: Wenn jedes Element genauso groß wie der Container ist oder keine explizite Höhe hat, bewirkt ein Wechsel zwischen flex-start, center und flex-end keine sichtbare Bewegung. Gib den Elementen eine feste Breite oder Höhe, oder ändere align-items weg von stretch, und die Ausrichtung wird sofort erkennbar. Du kannst auch mit align-self ein einzelnes Element gezielt anders positionieren. In diesem Playground kannst du Breite und Höhe pro Element auf jeder Element-Karte festlegen und dann align-items umschalten, um genau zu sehen, wann die Eigenschaft greift, bevor du den Code kopierst.

flex-wrap legt fest, ob Flex-Elemente auf eine einzige Zeile gezwungen werden oder auf mehrere Zeilen umbrechen dürfen. Mit nowrap, dem Standardwert, bleiben alle Elemente in einer Zeile und schrumpfen, um hineinzupassen — was sie stauchen oder zum Überlaufen bringen kann, wenn nicht genug Platz vorhanden ist. Mit wrap wandern Elemente, die nicht mehr hineinpassen, in eine neue Zeile, behalten dabei ihre bevorzugte Größe und erzeugen so ein mehrzeiliges Layout — unverzichtbar für responsive Karten-Grids und Tag-Listen. Zusätzlich gibt es wrap-reverse, bei dem die neuen Zeilen in umgekehrter Richtung gestapelt werden. Beachte, dass align-content, das diese umgebrochenen Zeilen verteilt, erst dann eine Wirkung entfaltet, wenn der Umbruch tatsächlich mehr als eine Zeile erzeugt. Dieser Playground bietet nowrap, wrap und wrap-reverse als einen einzigen Regler, mit dem du zwischen den Werten wechseln und in der Live-Vorschau beobachten kannst, wie die Elemente umbrechen, bevor du den Code kopierst.