H10 - Flexbox

Gebruik je bestaande vierlinksmenu, drie projectkaarten en footer. Die krijgen ieder een eigen flex-layout. De grote hoofdonderdelen staan voorlopig nog onder elkaar; grid plaatst ze in het volgende hoofdstuk.

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>
    <h2>Mijn projecten</h2>
    <div class="kaarten">
        <article class="kaart uitgelicht">
            <h3>Mijn eerste website</h3>
            <p>Mijn eigen portfolio met HTML en CSS.</p>
        </article>
        <article class="kaart">
            <h3>Een schoolproject</h3>
            <p>Een eigen idee uitgewerkt als ontwerp.</p>
        </article>
        <article class="kaart">
            <h3>Een hobbyproject</h3>
            <p>Iets dat ik met plezier heb gemaakt.</p>
        </article>
    </div>
</section>

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

• .kaarten is de flex container.
• Alleen de drie <article>-elementen zijn flex-items; de gezamenlijke h2 staat buiten de div.
• 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.

.site-nav ul {
    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 1 220px;
}

Bij flex: 1 1 220px zijn de drie waarden: groeifactor, krimpfactor en beginbreedte. Gelijke instellingen laten de kaarten vergelijkbaar meegroeien en krimpen. De beginbreedte helpt bij het doorlopen naar een volgende rij. De kortere vorm flex: 1 verdeelt de beschikbare ruimte vanuit een andere beginbasis.

.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>
    <h2>Mijn projecten</h2>
    <div class="kaarten">
        <article class="kaart uitgelicht">
            <h3>Mijn eerste website</h3>
            <p>Mijn eigen portfolio met HTML en CSS.</p>
        </article>
        <article class="kaart">
            <h3>Een schoolproject</h3>
            <p>Een eigen idee uitgewerkt als ontwerp.</p>
        </article>
        <article class="kaart">
            <h3>Een hobbyproject</h3>
            <p>Iets dat ik met plezier heb gemaakt.</p>
        </article>
    </div>
</section>

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

.kaart {
    flex: 1 1 220px;
    padding: 20px 24px;
    border: 1px solid var(--kleur-rand);
}

• 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 1 220px laat kaarten groeien en krimpen vanaf een beginbreedte.
• Met dezelfde drie kaartinstellingen blijven projecten samenhangend opgemaakt.

De footer uit H3 bevat twee alinea’s en een contactlink. Je hoeft die inhoud niet opnieuw te maken. Flexbox verdeelt deze directe kinderen, terwijl grid in H11 de hele footer onderaan plaatst.

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.site-footer p {
    margin: 0;
}

• 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.