Flexbox-speeltuin
Experimenteer met CSS Flexbox-eigenschappen op live items en kopieer de gegenereerde layout-CSS.
—
Alles draait in je browser — er wordt niets geüpload.
Over Flexbox-speeltuin
De Flexbox Playground is een praktische sandbox voor CSS-flexbox. Stel de containereigenschappen in — flex-direction, flex-wrap, justify-content, align-items, align-content en gap — en bekijk hoe tot 12 live items in de voorbeeldweergave herschikken bij elke wijziging. Het is de snelste manier om écht te begrijpen wat elke eigenschap doet.
Items zijn individueel te bewerken: klik er een aan om te selecteren en pas de flex-grow, flex-shrink, flex-basis, align-self en order aan. Zien hoe één item groeit om vrije ruimte op te vullen terwijl de andere items hun breedte behouden, leert het flex-formaatmodel sneller dan welk diagram dan ook.
De playground genereert schone CSS voor de container en voor elk item met afwijkende instellingen — kopieer die direct naar je stylesheet. Alles draait in je browser zonder uploads, en een reset-knop brengt je terug naar een schone lei.
Hoe gebruik je Flexbox-speeltuin
- Stel de flex-direction, wrap, justify-content, align-items, align-content en gap van de container in.
- Voeg items toe of verwijder ze — tussen 2 en 12 — om je echte component na te bootsen.
- Klik op een item en pas de grow, shrink, basis, align-self en order aan.
- Bekijk hoe de live voorbeeldweergave bij elke wijziging bijwerkt.
- Kopieer de gegenereerde CSS en plak die in je project.