CSS Flexbox is een krachtige CSS-lay-outmodule die is ontworpen om items langs één dimensie — een rij of een kolom — moeiteloos uit te lijnen en te verdelen. Anders dan de oude float- en inline-block-trucs plaatst Flexbox elementen langs een as, verdeelt het de overgebleven ruimte verstandig en lost het verticaal centreren in één regel op. In deze tutorial leer je de kern-eigenschappen van Flexbox met correcte syntaxis, echte voorbeelden en de lay-outpatronen die je dagelijks gebruikt.
De flex-container en het begrip as
Alles begint met het geven van display: flex aan een element. Dat element wordt een flex-container en de directe kinderen worden flex-items. Om Flexbox echt te begrijpen, moet je de twee assen doorgronden:
- Hoofdas: bepaald door
flex-direction. Bij de standaardwaarderowloopt deze van links naar rechts. - Kruisas: staat loodrecht op de hoofdas. In een
row-lay-out loopt deze van boven naar beneden.
Dit onderscheid is cruciaal: justify-content werkt altijd langs de hoofdas, terwijl align-items altijd langs de kruisas werkt. Wanneer je flex-direction wijzigt, wisselt de richting van beide eigenschappen mee.
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
}Verdelen op de hoofdas: justify-content
justify-content verdeelt items langs de hoofdas en beheert de ruimte ertussen. De meest gebruikte waarden zijn:
flex-start— zet items aan het begin (standaard).center— centreert de items.flex-end— zet items aan het einde.space-between— het eerste en laatste item plakken aan de randen, de resterende ruimte wordt gelijk ertussen verdeeld.space-around— gelijke ruimte aan beide zijden van elk item.space-evenly— alle tussenruimtes (inclusief de randen) zijn gelijk.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Uitlijnen op de kruisas: align-items en align-self
align-items lijnt elk item langs de kruisas uit. stretch (de standaard) rekt items uit tot de hoogte van de container, terwijl center ze verticaal centreert — de schoonste oplossing voor het probleem van het "verticaal centreren" dat ontwikkelaars jarenlang plaagde.
stretch— rekt items uit over de kruisas (standaard).flex-start/flex-end— lijnt uit aan het begin of het einde.center— centreert op de kruisas.baseline— lijnt de basislijnen van de tekst uit.
Wil je één item anders uitlijnen dan de rest, pas dan align-self toe op dat item; het overschrijft align-items alleen voor dat item.
.kaart {
align-self: flex-end; /* alleen dit item lijnt uit aan het einde */
}Afbreken en ruimte: flex-wrap en gap
Standaard blijven flex-items op één regel en krimpen ze als ze niet passen. Met flex-wrap: wrap mogen items naar een nieuwe regel stromen — de basis van responsieve kaartrasters. Om ruimte tussen items te zetten heb je geen margin-trucs meer nodig; de moderne oplossing is de gap-eigenschap.
.kaart-raster {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* ruimte tussen zowel rijen als kolommen */
}gap voegt alleen ruimte tussen items toe, nooit aan de buitenranden, waardoor het veel voorspelbaarder is dan de oude op margin gebaseerde aanpak.
Flexibiliteit: flex-grow, flex-shrink, flex-basis en de flex-afkorting
De echte kracht van Flexbox blijkt uit hoe het de overgebleven ruimte over de items verdeelt. Drie eigenschappen bepalen dit:
flex-grow— hoeveel een item groeit om de resterende ruimte te vullen (standaard0).flex-shrink— hoeveel een item krimpt als de ruimte krap is (standaard1).flex-basis— de beginafmeting voordat het groeit of krimpt (standaardauto).
Om alle drie op één regel te schrijven, gebruik je de flex-afkorting. De meest voorkomende patronen zijn:
.item {
flex: 1; /* flex: 1 1 0 — alle items delen gelijke breedte */
}
.vaste-zijbalk {
flex: 0 0 240px; /* groeit noch krimpt: een vaste kolom van 240px */
}
.flexibele-inhoud {
flex: 1 1 300px; /* start op 300px, groei bij ruimte, krimp indien nodig */
}Wanneer flex: 1 aan elk kind wordt gegeven, delen ze allemaal de overgebleven ruimte gelijk — de kortste weg naar kolommen van gelijke breedte.
Volgorde: order
De order-eigenschap laat je items visueel herordenen zonder hun volgorde in de HTML te wijzigen. De standaardwaarde is 0; lagere waarden gaan naar voren, hogere waarden naar achteren.
.uitgelicht {
order: -1; /* springt helemaal naar voren, waar het ook in de HTML staat */
}Toegankelijkheidsnotitie: order verandert alleen het visuele — de volgorde voor toetsenbord en schermlezer volgt nog steeds de HTML-bron. Gebruik het dus niet zo overmatig dat het de logische leesvolgorde breekt.
Een praktisch patroon: perfect centreren op het scherm
Een element zowel horizontaal als verticaal centreren is met Flexbox één blok:
.midden {
display: flex;
justify-content: center; /* hoofdas: horizontaal */
align-items: center; /* kruisas: verticaal */
min-height: 100vh;
}Voor een kaartraster zorgt het combineren van flex-wrap en flex-basis ervoor dat het aantal kolommen vanzelf groeit naarmate het scherm breder wordt — een responsief raster zonder ook maar één media query te schrijven.
Veelgestelde vragen
Moet ik Flexbox of Grid gebruiken?
De vuistregel: gebruik Flexbox voor eendimensionale lay-outs (één rij of kolom, navigatiebalken, knopgroepen, kaartrijen) en CSS Grid voor tweedimensionale lay-outs (rijen en kolommen samen uitlijnen, paginasjablonen). Ze zijn geen rivalen maar aanvullingen; de meeste pagina's nestelen ze samen.
Hoe houd ik justify-content en align-items uit elkaar?
justify-content werkt altijd langs de hoofdas (standaard horizontaal), terwijl align-items altijd langs de kruisas werkt (standaard verticaal). Stel flex-direction: column in en deze richtingen wisselen, omdat de hoofdas nu verticaal is.
Hoe voeg ik ruimte tussen items toe?
In moderne browsers is de schoonste methode de gap-eigenschap. Geef de container gap: 1rem in plaats van margin-trucs; het zet alleen items uit elkaar en houdt de buitenranden netjes.
Wil je lay-outproblemen voorgoed oplossen? Laten we samen een snelle, responsieve interface bouwen die Flexbox en Grid op de juiste manier combineert. Neem contact met me op en laten we het over je project hebben.