Flexbox

Vóór flexbox waren er trucs nodig om een blok verticaal te centreren. Met display: flex zijn twee declaraties genoeg: justify-content en align-items.

Eén rij of één kolom

Met flexbox, de CSS Flexible Box Layout-module, deel je een groep blokken langs één lijn in. Stel display: flex in op een container en de directe kinderen, de flex-items, komen naast elkaar te staan in plaats van onder elkaar. Die ene declaratie is genoeg voor een menubalk, een rij knoppen of een kaart waarvan de voettekst onderaan moet blijven. Flexbox werkt met één dimensie tegelijk: een rij of een kolom. Als je rijen en kolommen samen nodig hebt, is grid, in het volgende hoofdstuk, meestal het betere hulpmiddel.

Twee assen

Alles in flexbox wordt beschreven met twee assen. De hoofdas is de richting waarin de items lopen, ingesteld door flex-direction: row (standaard) of column. De dwarsas staat daar loodrecht op. justify-content verdeelt de items langs de hoofdas: flex-start, center, flex-end, space-between (eerste en laatste item aan de randen, gelijke afstanden ertussen) of space-around. align-items plaatst ze op de dwarsas: stretch (standaard, alle items even hoog als het hoogste), flex-start, center of flex-end. Je centreert een blok dus in beide richtingen met justify-content: center en align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Tussenruimte en regelomloop

gap zet ruimte tussen items zonder iets aan de buitenranden toe te voegen. Dat is meestal wat je wilt en wat met marges onhandig wordt. Standaard blijven flex-items op één regel en krimpen ze om te passen, ook als ze daardoor worden samengedrukt. Met flex-wrap: wrap kunnen ze naar een nieuwe regel als er onvoldoende ruimte is. Zo kan een rij van vier kaarten op een laptop veranderen in twee rijen van twee op een tablet en één kolom op een telefoon, zonder mediaquery.

Hoe items groeien en krimpen

De verkorte eigenschap flex op een item accepteert drie waarden. flex-grow zegt hoeveel van de overblijvende ruimte het item krijgt vergeleken met zijn broers en zussen; flex-shrink zegt hoe gemakkelijk het krimpt als de ruimte opraakt; flex-basis is de begingrootte vóór het groeien of krimpen. flex: 1 1 200px betekent beginnen bij 200 pixels en extra ruimte gelijk delen met andere items die ook grow 1 hebben. Alleen flex: 1 is kort voor 1 1 0%, waardoor alle items even breed worden. Geef één item flex-grow: 2 en de andere 1 en het krijgt tweemaal hun aandeel van de overblijvende ruimte.

Visuele volgorde en werkelijke volgorde

Met flexbox kun je de zichtbare volgorde van items veranderen via flex-direction: row-reverse of de eigenschap order, zonder de HTML aan te raken. Wees daar voorzichtig mee. Toetsenbordfocus en schermlezers volgen nog steeds de HTML-volgorde. Als het scherm dus Contact vóór Home toont, maar Tab eerst Home bezoekt, raken toetsenbordgebruikers de weg kwijt. Als de volgorde van belang is voor de betekenis, verander die dan in de HTML.