CSS Flexible Box Layout, bijna altijd Flexbox genoemd, is een manier om een groep elementen op één lijn te plaatsen en de beschikbare ruimte verstandig te laten delen. Je vertelt de rij hoe de items moeten uitlijnen en hoe de overgebleven ruimte verdeeld moet worden, en de browser doet het rekenwerk.
Stel je voor dat je stoelen langs één muur van een kamer zet. Flexbox is de instructie ‘verdeel deze gelijkmatig met gelijke tussenruimtes’, en zet je er een stoel bij, dan schuift alles op om de afstand gelijk te houden zonder dat je iets hoeft op te meten. Daarom is het de natuurlijke keuze voor een navigatiebalk, een rij knoppen of een kaartrij die op een telefoon naar een tweede regel moet doorbreken. Het hoort samen met gewone CSS bij de dagelijkse gereedschappen waar developers naar grijpen.
Het stuk dat een oude hoofdpijn oploste, is centreren. Vóór Flexbox vroeg iets precies in het midden zetten, zowel verticaal als horizontaal, om lelijke trucs met negatieve marges of absolute positionering. Nu doen twee korte regels het, en daarom namen developers het zo snel over. Het regelt ook het lastige geval waarin items verschillende hoogtes hebben en je ze allemaal bovenaan wilt uitlijnen of even hoog wilt rekken.
Flexbox is gemaakt voor één dimensie, een rij of een kolom. Als je rijen en kolommen tegelijk moet sturen, zoals een hele pagina-indeling, dan past CSS Grid beter, en in de praktijk worden ze samen gebruikt. Flexbox maakt responsive design ook veel makkelijker omdat items vanzelf kunnen doorbreken en meeschalen.
Bij TopDevs gebruiken we Flexbox voor de kleine, terugkerende indelingen op de site van een klant, zodat menu’s en knopgroepen op elk schermformaat netjes uitgelijnd blijven zonder broze, met de hand afgestelde tussenruimtes.
