Flexbox

Flexbox (Flexible Box Layout) is een eendimensionale CSS-layoutmethode ontworpen voor het rangschikken van items in rijen of kolommen. Het blinkt uit in het verdelen van ruimte tussen items, het uitlijnen van content zowel horizontaal als verticaal, en het omgaan met dynamische of onbekende groottes. Flexbox is perfect voor navigatiemenu's, kaartlayouts, content centreren en elke situatie die flexibele itemrangschikking vereist.

Om een navigatiebalk te maken waar items gelijkmatig verdeeld en verticaal gecentreerd zijn, pas display: flex toe op de container, gebruik dan justify-content: space-between om items horizontaal te verdelen en align-items: center om ze verticaal te centreren. Voor een kaart die resterende ruimte in een rij moet vullen, voeg simpelweg flex: 1 toe aan dat element.