Über dieses Tool
Der CSS-Flexbox-Playground ist ein interaktiver Editor für die wichtigsten Layout-Eigenschaften eines Flex-Containers. Wählen Sie in vier Dropdowns Werte für flex-direction, justify-content, align-items und flex-wrap, und eine Vorschau aus fünf nummerierten Boxen ordnet sich sofort neu an, sodass Sie sehen, wie jede Eigenschaft das Layout formt, bevor Sie überhaupt Code schreiben.
Unterhalb der Vorschau wird die passende .container-Regel während der Arbeit erzeugt: display: flex gefolgt von den vier gewählten Deklarationen. Eine Schaltfläche kopiert den gesamten Block in Ihre Zwischenablage, bereit zum Einfügen in ein Stylesheet. Nur diese Eigenschaften auf Container-Ebene sind zugänglich; Einstellungen pro Element wie flex-grow, order oder align-self werden nicht abgedeckt.
Alles läuft in Ihrem Browser. Nichts wird hochgeladen, es gibt keine Konten und kein Tracking, und es funktioniert offline. Es ist ein schneller Weg, ein Gefühl für Flexbox zu entwickeln oder eine Ausgangsregel zu erzeugen, die Sie anschließend von Hand verfeinern.