Flexbox is for one dimensional layout. A row OR a column. Grid is for two dimensional layout. Rows AND columns.
— Rachel Andrew

CSS flexbox module

flex container / kinderen;
hoofdas / nevenas;
uitlijnen volgens beide assen;
flex-grow, flex-shrink, flex-basis;
flex-wrap.

Learn flexbox the easy way

Voor deskundige uitleg over flex gaan we weer te rade bij Kevin Powell. Hij heeft meer dan één video over flexbox, want over deze module valt heel wat te vertellen. Het beste overzicht geeft onderstaand filmpje van 34 minuten.

Wat moet je weten om deze uitleg te kunnen volgen:

Met de eigenschap display: flex maak je een element tot een flex-container. De directe kinderen (dus niet kleinkinderen enz) van dit element worden dan flex items.
Bij flex spreekt men over een hoofdas en een nevenas. De standaardoptie is flex-direction: row en dat betekent dat de horizontale richting de hoofdas is en de verticale as de nevenas.
In de uitleg heeft Kevin het op een bepaald moment over een @media regel. Op zich niet zo moeilijk om te begrijpen, maar dit is het onderwerp van één van de laatste topics van de module CSS, nl. RWD.
Het duidelijkste grafische overzicht over alle mogelijkheden van flexbox vind je op https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Dit overzicht bestaat grotendeels uit twee kolommen. Alles in de linkerkolom gaat over de flex-container (het ouderelement). De rechterkolom beschrijft de eigenschappen van de flex items (de kinderen):

Waarvoor flex gebruiken?

De site die je nu bekijkt gebruikt o.a. flex voor:

Navigatie: zeker als je je site wilt maken voor alle groottes van schermen, biedt flex heel wat voordelen voor de lijst die een nav in essentie is. Op grote schermen kunnen die items naast elkaar, op kleinere schermen is een lay-out in een kolom misschien handiger.
Ook de navigatie binnen een blok (HTML, CSS, JS) met de foto's waarop een woord staat had met flex gedaan kunnen worden via flex-wrap: wrap. Maar ik koos hier voor de oplossing met grid (zie volgend blokje).

Je vindt veel sites met een uitleg hoe je de items in de navigatie naast elkaar kan krijgen met float of inline-block. Dat is helemaal niet fout en werkt ook nu nog. Maar het is wel erg verouderd. Voor de site die je als project maakt, gaan we ervan uit dat je voor de ul in de nav gebruik maakt van display: flex.