Flexbox
Home

Flexbox

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

  1. op een bepaalde plaats zetten;
  2. in een bepaalde volgorde;
  3. uitlijnen;
  4. 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:

  1. gerekt en gekrompen worden tot ze passen in de hen toegekende ruimte;
  2. worden gerangschikt in verhouding tot elkaar;
  3. 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:

  1. horizontaal;
  2. 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

  1. Een flexibele lay-out maken
  2. Flex container eigenschappen
    1. De flex-direction eigenschap
    2. De flex-wrap eigenschap
    3. De flex-flow eigenschap
    4. De justify-content eigenschap
    5. De align-items eigenschap
    6. De align-content eigenschap
  3. Flex item eigenschappen
    1. De order eigenschap
    2. De align-self eigenschap
    3. De flex-grow eigenschap
    4. De flex-shrink eigenschap
    5. De flex-basis eigenschap
    6. De flex eigenschap
  4. Oefeningen

JI
2020-08-07 10:53:21