Flexbox, een afkorting van Flexible Box Layout, is een CSS-module die is ontworpen om het uitlijnen, verdelen en organiseren van elementen binnen een container te vereenvoudigen.

Flexbox maakt gebruik van een ouder-kindrelatie. De ouder wordt de flexcontainer genoemd, die de lay-out beheert. De kinderen worden flexitems genoemd, waarvan de grootte, positie en volgorde kunnen worden geregeld met flexbox-eigenschappen.

Opmerking

Flexbox gedraagt zich anders dan blok- en inline-elementen. In tegenstelling tot blok-elementen stapelen flexitems niet verticaal; ze worden standaard in een rij of kolom uitgelijnd. Daarnaast reiken de marges aan de randen van de container niet buiten de grenzen ervan.

Flexbox in de praktijk

Flexbox werkt door items uit te lijnen langs de assen van de flexcontainer. Om Flexbox in te schakelen, hoeft u alleen de eigenschap display: flex; toe te passen op het ouderelement. Vervolgens kunt u aanpassen hoe de items binnen de container worden uitgelijnd en verdeeld.