CSS Flexbox-generator
Met de CSS flexbox generator stel je flex-direction, justify-content, align-items, flex-wrap, align-content en gap in op een container, bekijk je tot 20 items live en kopieer je de gegenereerde CSS.
Over deze tool
Met de CSS flexbox generator stel je flex-direction, justify-content, align-items, flex-wrap, align-content en gap in op een container, bekijk je tot 20 items live en kopieer je de gegenereerde CSS.
Zo gebruik je het
- Kies de richting en het wrappen.
- Stel justify-content en align-items in (en align-content voor meerdere regels).
- Stel de gap en het aantal preview-items in.
- Klik op Copy CSS om de containerregels te gebruiken.
Goed om te weten
- justify-content lijnt items uit langs de hoofdas; align-items lijnt ze uit op de dwarsas.
- flex-direction: column verwisselt de assen, zodat justify-content dan verticaal werkt.
- align-content heeft alleen effect als items over meerdere regels verdeeld worden.
- De eigenschap gap werkt in Flexbox in alle huidige grote browsers.
- Flexbox is eendimensionaal; gebruik CSS Grid voor rijen en kolommen tegelijk.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe centreer ik een div met Flexbox?
Zet op de parent display: flex; justify-content: center; align-items: center; en het kind staat horizontaal en verticaal gecentreerd.
Wat is het verschil tussen justify-content en align-items?
justify-content verdeelt items langs de hoofdas (standaard een rij); align-items positioneert ze langs de dwarsas.
Wanneer gebruik ik Flexbox in plaats van Grid?
Gebruik Flexbox voor eendimensionale lay-outs zoals navigatiebalken en rijen knoppen, en Grid voor tweedimensionale paginalay-outs.
Waarom doet align-content niets?
align-content werkt alleen als flex-wrap items over meer dan één regel laat verdelen.