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.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Wähle eine Vorlage, oder starte mit der Standardreihe.
Passe die Container-Einstellungen an, wähle dann ein Element aus, um dessen eigenes Wachstum, Schrumpfung und Basis einzustellen.
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.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
Anleitung lesenHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
Anleitung lesenA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
Anleitung lesen
Kommentare