Horizontaal uitlijnen met CSS Flexbox

We zagen al dat verticaal uitlijnen met CSS Flexbox heel erg simpel is, maar Flexbox biedt meer, zo is horizontaal uitlijnen ook super gemakkelijk. Horizontaal uitlijnen doen we met de justify-content CSS eigenschap,  inhoud van een flexbox horizontaal te centreren doe je bijvoorbeeld zo:

.wrapper {
 display: flex;
 justify-content: center;
}

justify-content

De CSS eigenschap justify-content zorgt ervoor dat de inhoud van de Flexbox horizontaal uitgelijnd wordt, met deze eigenschap kan je de volgende waardes gebruiken:

WaardeOmschrijvingResultaat
flex-start (standaard)de items worden links uitgelijndbekijk resultaat
flex-endde items worden rechts uitgelijndbekijk resultaat
space-betweende items worden uitgelijnd met ruimte tussen de itemsbekijk resultaat
space-aroundde items worden uitgelijnd met ruimte links en rechts van de itemsbekijk resultaat
centerde items worden in het midden uitgelijndbekijk resultaat

Justify content

De breedte bepalen

Leuk en aardig natuurlijk allemaal, maar wat je wilt is natuurlijk dat je ook de breedte kan bepalen van de objecten in de flexbox. Gelukkig gaat dit ook super gemakkelijk, je geeft alle objecten of items deze CSS eigenschap mee:

.box {
 flex: 1;
}

Met de CSS hierboven geef je aan dat alle items dezelfde breedte hebben, dus ongeacht of je nou 2, 3 of 4 items hebt, ze krijgen automatisch dezelfde breedte.