Flexbox, eli Flexible Box Layout, on CSS-moduuli, joka on suunniteltu helpottamaan elementtien kohdistamista, jakamista ja järjestämistä säiliön sisällä.

Flexbox perustuu vanhempi-lapsi-suhteeseen. Vanhempi on nimeltään flex-säiliö, joka hallitsee asettelua. Lapset ovat flex-elementtejä, joiden kokoa, sijaintia ja järjestystä voidaan hallita flexbox-ominaisuuksilla.

Huomio

Flexbox käyttäytyy eri tavalla kuin lohko- ja rivielementit. Toisin kuin lohkoelementit, flex-elementit eivät asetu pystysuoraan päällekkäin; ne asettuvat oletuksena riviin tai sarakkeeseen. Lisäksi säiliön reunojen marginaalit eivät ylitä sen rajoja.

Flexbox käytännössä

Flexbox kohdistaa elementit säiliön akseleiden mukaan. Flexbox otetaan käyttöön lisäämällä vanhemmalle elementille display: flex; -ominaisuus. Tämän jälkeen voit mukauttaa, miten elementit kohdistuvat ja jakautuvat säiliön sisällä.