H10 - Flexbox

Layout is vaak het onderdeel dat je als eerste nodig hebt als je een website wilt maken: blokken naast elkaar, een menu netjes uitlijnen, kaarten in rijen zetten en ruimte verdelen. Toch behandelen we layout pas later in deze training, omdat het meestal ook het lastigste onderdeel van webdesign is.

Flexbox is een moderne CSS-techniek om onderdelen netjes naast elkaar of onder elkaar te zetten. Je gebruikt flexbox vooral voor layouts in één richting: een rij of een kolom.

Een goede manier om flexbox te oefenen is het spel Flexbox Froggy. Speel het spel. Echt: speel het spel. Het maakt flexbox veel begrijpelijker.

Hoe speel je Flexbox Froggy?

1. Open flexboxfroggy.com/#nl.
2. Je ziet kikkers en waterlelies op het scherm.
3. De kikker moet naar de juiste waterlelie.
4. Links of onderin staat een CSS-editor.
5. Je typt daar flexbox-regels, bijvoorbeeld justify-content: center;.
6. Als de kikker goed staat, ga je door naar het volgende level.
7. Lees per level goed welke property je oefent.
8. Speel niet te snel door: probeer te begrijpen waarom de kikker beweegt.

Zie het spel als oefening voor je gevoel voor layout. Je hoeft niet alles meteen uit je hoofd te kennen. Het belangrijkste is dat je herkent welke eigenschap ongeveer welk probleem oplost.

Flexbox werkt met een container en items. De container is het element waarop je display: flex zet. De directe kinderen van die container worden flex items.

<section class="kaarten">
    <article class="kaart">
        <h2>HTML</h2>
        <p>Structuur van de pagina.</p>
    </article>

    <article class="kaart">
        <h2>CSS</h2>
        <p>Vormgeving van de pagina.</p>
    </article>

    <article class="kaart">
        <h2>Layout</h2>
        <p>Onderdelen netjes plaatsen.</p>
    </article>
</section>

.kaarten {
    display: flex;
    gap: 20px;
}

• .kaarten is de flex container.
• De drie <article>-elementen zijn flex items.
• display: flex zet de items standaard naast elkaar.
• gap maakt ruimte tussen de items.

Met flex-direction bepaal je de richting van de flex items. Standaard staan flex items in een rij.

.kaarten {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

Wil je de items onder elkaar zetten, dan gebruik je column.

.kaarten {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

• row: items staan naast elkaar.
• column: items staan onder elkaar.
• row-reverse: items staan naast elkaar, maar omgekeerd.
• column-reverse: items staan onder elkaar, maar omgekeerd.

Met justify-content verdeel je items over de hoofdrichting. Bij flex-direction: row is dat meestal horizontaal.

.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
}

• flex-start: items beginnen aan het begin.
• center: items staan in het midden.
• flex-end: items staan aan het einde.
• space-between: eerste item links, laatste item rechts, ruimte ertussen.
• space-around: ruimte om elk item heen.
• space-evenly: gelijke ruimte tussen en naast alle items.

In Flexbox Froggy oefen je dit al vroeg. Let daar goed op: dit is een van de belangrijkste flexbox-properties.

Met align-items lijn je items uit op de kruisas. Bij een gewone rij is dat meestal verticaal.

.banner {
    display: flex;
    align-items: center;
    min-height: 200px;
}

• stretch: items rekken standaard uit.
• flex-start: items staan aan het begin van de kruisas.
• center: items staan in het midden van de kruisas.
• flex-end: items staan aan het einde van de kruisas.

Een veelgebruikte combinatie is horizontaal en verticaal centreren:

.vlak {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

Met gap maak je ruimte tussen flex items. Dit is vaak beter dan losse margins op alle items.

.kaarten {
    display: flex;
    gap: 24px;
}

• gap hoort op de flex container.
• De ruimte komt tussen de flex items.
• Je hoeft dan niet elk item apart margin te geven.
• Dat maakt de CSS eenvoudiger en netter.

.kaarten {
    display: flex;
    row-gap: 24px;
    column-gap: 32px;
}

Met row-gap en column-gap kun je verticale en horizontale ruimte apart instellen.

Als flex items niet meer naast elkaar passen, kun je ze naar een nieuwe regel laten doorlopen. Daarvoor gebruik je flex-wrap.

.kaarten {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.kaart {
    width: 240px;
}

• nowrap is standaard: items blijven op één regel.
• wrap laat items naar een nieuwe regel gaan.
• Dit is handig bij kaarten, producten, tegels of kleine blokken.
• Flexbox kan zo beter reageren op verschillende schermbreedtes.

Je kunt flex items laten groeien of krimpen. De meest gebruikte korte schrijfwijze is flex.

.kaart {
    flex: 1;
}

Met flex: 1 mogen de items de beschikbare ruimte eerlijk verdelen.

.zijbalk {
    flex: 1;
}

.inhoud {
    flex: 3;
}

In dit voorbeeld krijgt de inhoud ongeveer drie keer zoveel ruimte als de zijbalk.

• flex: 1 is handig voor gelijke kolommen.
• Grotere getallen krijgen meer ruimte.
• Gebruik dit rustig en test goed in de browser.

Dit voorbeeld maakt een rij met kaarten. Op kleinere schermen mogen de kaarten doorlopen naar de volgende regel.

<section class="kaarten">
    <article class="kaart">
        <h2>HTML</h2>
        <p>Structuur maken.</p>
    </article>

    <article class="kaart">
        <h2>CSS</h2>
        <p>Vormgeving maken.</p>
    </article>

    <article class="kaart">
        <h2>Flexbox</h2>
        <p>Layout maken.</p>
    </article>
</section>

.kaarten {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.kaart {
    flex: 1;
    min-width: 220px;
    padding: 24px;
    border: 1px solid gray;
}

• display: flex zet de kaarten in een flex layout.
• flex-wrap: wrap laat kaarten doorlopen als er te weinig ruimte is.
• gap maakt ruimte tussen de kaarten.
• flex: 1 laat kaarten meegroeien.
• min-width voorkomt dat kaarten te smal worden.

• Gebruik flexbox voor layout in één richting: rij of kolom.
• Zet display: flex op de container, niet op elk item.
• Gebruik gap voor ruimte tussen items.
• Gebruik justify-content voor verdeling in de hoofdrichting.
• Gebruik align-items voor uitlijning op de kruisas.
• Gebruik flex-wrap: wrap als items mogen doorlopen.
• Gebruik flexbox niet voor alles. Voor echte raster-layouts leer je hierna CSS Grid.
• Speel Flexbox Froggy als je vastloopt. Het spel is hier echt nuttig.