Met flex-box kun je een groep elementen op je webpagina uitlijnen en de beschikbare ruimte flexibel verdelen. Flexbox past bij moderne vormgeving doordat het met weinig code zowel de opmaak voor computerschermen als voor mobieltjes instelt.

Standaard zorgt een flex-box ervoor dat de elementen die er in opgenomen zijn naast elkaar geplaatst worden in de beschikbare ruimte.

Het positioneren van boxen A t/m E gaat automatisch als je bij flex-bak de volgende css-regel toevoegd:

Een voorbeeld van het ordenen van je HTML als je je ontwerp wilt vormgeven met flexbox.

En de CSS-code die je dan aan dit project moet toevoegen.

Zonder flex-box zouden de vijf boxen onder elkaar geplaatst worden en ieder de volledige breedte van het scherm innemen. De flex-box zet alle flex-items (box A t/m E) naast elkaar en probeert het over de schermbreedte te verdelen.

Als dat eigenlijk te krap is kun je de eigenschap flex-wrap instellen op wrap en dan kan er doorgegaan worden op de volgende "regel"

De flexbox is in twee richtingen op te maken: De hoofdas is standaard van links naar rechts. De kruis-as van boven naar beneden.

De hoofdas kan ook van boven naar beneden ingesteld worden (flex-direction:column) Dan is de kruis-as van links naar rechts.

Om bijvoorbeeld een pagina-verdeling te krijgen met drie delen naast elkaar hoef je de drie delen enkel in te pakken in een div die de eigenschap display:flex; heeft.
De elementen die ingepakt zijn worden daarmee flex-items. Die items kunnen met de eigenschap flex:25%; een breedte toegekend krijgen. Die breedte is dan 25% van de totale beschikbare breedte binnen de flex-container.

Zie Flex-box guide voor toelichting op de eigenschappen van de flex-box (ouder) en de flex-box-items (kinderen).