CSS Flexbox spiekbriefje: eigenschappen en waarden
Flexbox plaatst items in één dimensie — een rij of een kolom — en verdeelt de ruimte ertussen. De eigenschappen splitsen in twee groepen: die je op de container (de flex-ouder) zet en die je op de items (de kinderen) zet.
Het mentale model: flex-direction bepaalt de hoofdas; justify-content lijnt eromheen uit, en align-items lijnt uit langs de loodrechte kruisas.
Bijgewerkt 2026-07-06
Container-eigenschappen (de flex-ouder)
| Eigenschap | Waarden | Wat het doet |
|---|---|---|
| display | flex | inline-flex | Een element in een flex-container veranderen |
| flex-direction | row | row-reverse | column | column-reverse | Richting van de hoofdas |
| flex-wrap | nowrap | wrap | wrap-reverse | Of items naar nieuwe regels teruglopen |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Uitlijning langs de hoofdas |
| align-items | stretch | flex-start | center | flex-end | baseline | Uitlijning langs de kruisas |
| align-content | flex-start | center | space-between | stretch | Lijnt teruggelopen regels uit (meerdere rijen) |
| gap | <length> (e.g. 16px) | Ruimte tussen items |
Item-eigenschappen (de kinderen)
| Eigenschap | Waarden | Wat het doet |
|---|---|---|
| flex-grow | 0 | <number> | Hoeveel een item groeit om ruimte te vullen |
| flex-shrink | 1 | <number> | Hoeveel een item krimpt als de ruimte krap is |
| flex-basis | auto | <length> | De startgrootte van het item vóór grow/shrink |
| flex | e.g. 1 1 0 | 1 | auto | Afkorting voor grow, shrink en basis |
| align-self | auto | center | flex-start | flex-end | stretch | align-items overschrijven voor één item |
| order | 0 | <integer> | Een item visueel herordenen (kleiner komt eerst) |
De meest voorkomende centreertruc: zet op de container display: flex; justify-content: center; align-items: center; om een kind zowel horizontaal als verticaal te centreren. Voor de groottes-eenheden in deze waarden, zie de CSS-eenheden-referentie.