Flexbox

Twee dingen naast elkaar zetten, of iets verticaal centreren: daar bestond jarenlang geen fatsoenlijke oplossing voor.

Wat je nog op oudere sites en in oudere cursussen zult zien:

/* gebruik dit niet! 🤮 */
.kolom {
    float: left;
}

float is bedoeld om tekst rond een afbeelding te laten lopen. Alles wat er daarna mee gebouwd is, was een omweg. We konden niet anders en hebben dan maar float misbruikt.

Voor verticaal centreren bestonden er trucs met line-height en met display: table. Ook die mag je vergeten.

💡 Dé guide voor flexbox

De volledige referentie staat in A guide to flexbox. Die link ga je nog jaren gebruiken.

De flex container

Je zet display: flex op de parent. Alle directe kinderen worden flex items en gaan naast elkaar staan.

.container {
    display: flex;
}

💡 Er bestaat ook inline-flex, voor een container die zich als inline element gedraagt.

Vanaf dat moment heb je twee assen:

• de main axis, de richting waarin je items staan
• de cross axis, daar loodrecht op

Welke welke is, hangt af van flex-direction.
Ontzettend verwarrend in het begin! Flex-direction column 'draait' je axis 90°.

Zes properties voor de container

Property	Waarden
flex-direction	row (standaard), row-reverse, column, column-reverse
flex-wrap	nowrap (standaard), wrap, wrap-reverse
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	stretch (standaard), flex-start, flex-end, center, baseline
align-content	zelfde waarden als justify-content, plus stretch
gap	row-gap en column-gap samen

Drie dingen om vast te houden:

• justify-content werkt langs de main axis. Bij flex-direction: column is dat dus van boven naar onder.
• align-items werkt langs de cross axis.
• align-content doet alleen iets als je flex-wrap: wrap hebt én er meerdere rijen zijn.

gap zet ruimte tussen de items, en niet tussen de items en de rand van de container. Die laatste blijft de padding van je container.

Vijf properties voor de items

Property	Wat het doet
order	volgorde. Standaard 0. Negatief gaat naar voor, positief naar achter
flex-grow	aandeel in de ruimte die overblijft. Standaard 0
flex-shrink	mag het item krimpen als er te weinig plaats is. Standaard 1
flex-basis	afmeting vóór de vrije ruimte verdeeld wordt. Standaard auto
align-self	overschrijft align-items voor dit ene item

order verandert alleen de visuele volgorde. Je HTML blijft staan zoals ze staat, en een screen reader leest ze in die volgorde.

De eerste drie schrijf je in echte code als één shorthand:

.item {
    flex: 0 1 auto;   /* grow shrink basis, dit zijn de standaardwaarden */
}

Probeer het

Playground

Alle elf properties staan in de stylesheet, met achter elke regel de waarden die je mag proberen. Sleep de rechterrand van het grijze vlak om de container smaller te maken.

• zet flex-direction op column en kijk wat justify-content dan doet
• zet flex-wrap op wrap en maak de container smal
• geef item 3 een flex-grow van 1, en daarna van 2
• zet align-items op baseline en kijk naar item 3

Zelf oefenen

Flexbox Froggy is 24 levels lang en duurt hooguit een half uur.