Flexbox, forkortelse for Flexible Box Layout, er et CSS-modul utviklet for å forenkle justering, fordeling og organisering av elementer innenfor en beholder.

Flexbox benytter et foreldre-barn-forhold. Forelderen kalles flex container, som styrer oppsettet. Barna kalles flex items, hvor størrelse, posisjon og rekkefølge kan kontrolleres ved hjelp av flexbox-egenskaper.

Merk

Flexbox oppfører seg annerledes enn blokk- og inline-elementer. I motsetning til blokkelementer, stabler ikke flex items seg vertikalt; de plasseres i en rad eller kolonne som standard. I tillegg strekker ikke margene ved kantene av beholderen seg utenfor dens grenser.

Flexbox i praksis

Flexbox fungerer ved å justere elementer langs aksene til flex containeren. For å aktivere Flexbox, bruk ganske enkelt egenskapen display: flex; på foreldre-elementet. Derfra kan du tilpasse hvordan elementene justeres og fordeles i beholderen.