Flexbox-generator
Stel een Flexbox-container live in en kopieer de kant-en-klare CSS.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Beheers Flexbox zonder gokken
Kies richting, uitlijning, afbreken en spacing: de voorvertoning werkt live bij en de container-CSS staat klaar om te kopiëren.
-
Stel de eigenschappen in
direction, justify, align, wrap, gap.
-
Bekijk de voorvertoning
Genummerde items reageren live.
-
Kopieer de CSS
Pas toe op je container.
De container-CSS
| Eigenschap | Rol |
|---|---|
| display: flex | Activeert Flexbox |
| flex-direction | Rij of kolom |
| justify-content | Verdeling (hoofdas) |
| align-items | Uitlijning (kruisas) |
| gap | Ruimte tussen items |
De CSS geldt voor de ouder; kinderen plaatsen zichzelf. Alles wordt in je browser gegenereerd.
Veelgestelde vragen
Waarvoor dient Flexbox?
Flexbox is een CSS-layoutmodus om items op een rij of kolom uit te lijnen en te verdelen. Het regelt spacing, centreren en afbreken automatisch, wat responsive layouts sterk vereenvoudigt.
Wat is het verschil tussen justify-content en align-items?
justify-content verdeelt items langs de hoofdas (horizontaal bij row), align-items lijnt ze uit op de kruisas (verticaal bij row). Bij column wisselen beide assen.
Geldt de gegenereerde CSS voor de container of de items?
Voor de container. De eigenschappen (display: flex, justify-content, enz.) komen op de ouder; de kinderen plaatsen zich vanzelf. De voorvertoning toont genummerde items.
Wat doet flex-wrap?
Standaard (nowrap) blijven items op één regel en krimpen indien nodig. Met wrap gaan ze naar de volgende regel als de ruimte op is — handig voor vloeiende rasters.