Flexbox

Flexbox of de flexibele box lay-out, is een manier om een lay-out met CSS3 te maken en is bedoeld voor het opmaken van complexe applicaties en webpagina's.

Inleiding

Met Flexbox kan je elementen lay-outen in een container. Je kan ze

op een bepaalde plaats zetten;
in een bepaalde volgorde;
uitlijnen;
de ruimte er tussen (en / of rond) verdelen, ongeacht hun grootte;

M.a.w. je kan die elementen in de container letterlijk flexibel maken, ze kunnen:

gerekt en gekrompen worden tot ze passen in de hen toegekende ruimte;
worden gerangschikt in verhouding tot elkaar;
alle beschikbare ruimte tussen of rond hen kan worden verdeeld op basis van een opgegeven verhouding;

Je kan de elementen in een container lay-outen in twee richtingen, de zogenaamde flex richtingen:

horizontaal;
verticaal;

Je bent niet gebonden aan één richting als in andere lay-out technieken. Dit maakt meer adaptieve en responsieve lay-outs mogelijk die zich aanpassen aan de lay-out veranderingen op verschillende schermformaten en oriëntaties.

Tenslotte kan je de visuele volgorde van elementen binnen de container veranderen zonder dat hun werkelijke volgorde in de markup gewijzigd moet worden.

Inhoud

2020-08-07 10:53:21