Flexbox Workflow

In de vroege dagen van webdesign was het horizontaal en verticaal uitlijnen van elementen een van de grootste uitdagingen. Ontwerpers moesten goochelen met float, vreemde marges en inline-block hacks om kolommen netjes naast elkaar te krijgen.

Met de komst van Flexible Box Layout (Flexbox) werd dit verleden tijd. Flexbox is een krachtig 1D-lay-outsysteem (één-dimensionaal: in een rij óf in een kolom) waarmee je elementen moeiteloos kunt verdelen, uitlijnen en schalen binnen een container — ongeacht de schermgrootte.

In deze les leer je hoe je met de belangrijkste Flexbox-eigenschappen een strakke, responsieve lay-out bouwt.

---

1. De Basis: Flex Container & Flex Items

Om Flexbox te activeren, geef je het bovenliggende element (de parent container) de CSS-eigenschap display: flex;.

Zodra je dit doet, gebeurt er iets magisch:

1. De parent wordt een Flex Container.
2. Alle directe kinderen (children) worden automatisch Flex Items.
3. De Flex Items gaan direct strak naast elkaar op één horizontale rij staan.

<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.flex-container {
    display: flex; /* Activeert Flexbox op de container */
    background-color: #f1f5f9;
    padding: 20px;
}

.item {
    background-color: #2563eb;
    color: white;
    padding: 20px;
    margin: 5px;
}

---

2. De Twee Assen van Flexbox

Om Flexbox goed te begrijpen, moet je denken in twee assen:

1. Hoofdas (Main Axis): De primaire richting waarin de Flex Items worden geplaatst (standaard van links naar rechts).
2. Dwarsas (Cross Axis): De as die loodrecht op de hoofdas staat (standaard van boven naar beneden).

       HOOFDAS (Main Axis) ──────────────►
   ┌────────────────────────────────────────┐
   │  ┌─────────┐  ┌─────────┐  ┌─────────┐ │ ┬
   │  │ Item 1  │  │ Item 2  │  │ Item 3  │ │ │ DWARSAS
   │  └─────────┘  └─────────┘  └─────────┘ │ ▼ (Cross Axis)
   └────────────────────────────────────────┘

---

3. Richting van de Hoofdas (flex-direction)

Met flex-direction bepaal je de richting van de hoofdas. Hiermee kies je of de items in een rij of in een kolom komen te staan.

.flex-container {
    display: flex;
    flex-direction: row; /* Standaard: van links naar rechts */
}

De 4 Mogelijke Waarden:

• row (standaard): Items staan horizontaal naast elkaar (van links naar rechts).
• row-reverse: Items staan horizontaal, maar in omgekeerde volgorde (van rechts naar links).
• column: Items worden verticaal onder elkaar gestapeld (van boven naar beneden).
• column-reverse: Items worden verticaal gestapeld, maar in omgekeerde volgorde.

Tip: Zet je flex-direction op column? Dan wordt de verticale richting je hoofdas en de horizontale richting je dwarsas!

---

4. Uitlijnen op de Hoofdas (justify-content)

Met justify-content bepaal je hoe de overgebleven vrije ruimte op de hoofdas wordt verdeeld tussen en rondom de Flex Items.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Veelgebruikte Waarden:

• flex-start (standaard): Items plakken aan het begin van de hoofdas.
• flex-end: Items schuiven naar het einde van de hoofdas.
• center: Items worden netjes in het midden gecentreerd.
• space-between: Eerste item staat uiterst links, laatste uiterst rechts. De overige ruimte wordt gelijk verdeeld tussen de items.
• space-around: Elk item krijgt evenveel witruimte aan beide zijden (de ruimte tussen twee items is dus dubbel zo breed als aan de buitenkanten).
• space-evenly: Alle tussenruimtes en buitenruimtes zijn exact even groot.

---

5. Uitlijnen op de Dwarsas (align-items)

Met align-items bepaal je hoe de items worden uitgelijnd op de dwarsas (haaks op de hoofdas).

.flex-container {
    display: flex;
    height: 200px;
    align-items: center; /* Centreert de items verticaal */
}

Veelgebruikte Waarden:

• stretch (standaard): Items worden uitgerekt om de volledige hoogte/breedte van de container op te vullen.
• flex-start: Items worden aan het begin van de dwarsas geplaatst (bovenaan).
• flex-end: Items worden aan het einde van de dwarsas geplaatst (onderaan).
• center: Items worden perfect gecentreerd op de dwarsas.
• baseline: Items worden uitgelijnt op de onderkant van hun tekst (de typografische basislijn).

---

6. Meerdere Regels & Tussenruimte (flex-wrap & gap)

A. Omgaan met overloop (flex-wrap)

Standaard proberen Flex Items altijd op één enkele regel te blijven, zelfs als ze daarvoor in elkaar gedrukt moeten worden. Met flex-wrap sta je toe dat items naar een volgende regel springen als de ruimte opraakt.

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Items springen naar een nieuwe regel indien nodig */
}

• nowrap (standaard): Alles blijft op één regel staan.
• wrap: Items springen naar een nieuwe regel van boven naar beneden.

---

B. Ruimte tussen items instellen (gap)

In plaats van ingewikkelde marges te geven aan individuele items, gebruik je de eigenschap gap op de container om een vaste tussenruimte in te stellen.

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 20px ruimte tussen álle items (zowel horizontaal als verticaal) */
}

Tip: Je kunt ook row-gap en column-gap los van elkaar instellen als je een verschillende rij- en kolomatstand wilt!

---

7. Flexibiliteit van de Items (flex-grow & flex-shrink)

Waar de vorige eigenschappen op de flex container werden gezet, stel je flex-grow en flex-shrink direct in op de flex items zelf.

A. Meegroeien met vrije ruimte (flex-grow)

flex-grow geeft aan hoeveel verhoudingsgewijze ruimte een item mag innemen als er extra vrije ruimte in de container is.

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; } /* Wordt dubbel zo breed als item-1 */

B. Krimpen bij ruimtegebrek (flex-shrink)

flex-shrink bepaalt hoe sterk een item moet krimpen ten opzichte van de andere items wanneer de container te smal wordt.

.item-belangrijk {
    flex-shrink: 0; /* Dit item zal NOOIT kleiner krimpen dan zijn originele breedte */
}

---

8. Vergelijkingstabel Flexbox Eigenschappen

---

9. Compleet Praktijkvoorbeeld: Een Responsieve Navigation & Card Grid

In dit voorbeeld combineren we een flexibele header-navigatie en een responsief overzicht van kaarten.

HTML (index.html)

<header class="navbar">
    <div class="logo">Studio Viso</div>
    <nav class="nav-links">
        <a href="#">Home</a>
        <a href="#">Projecten</a>
        <a href="#">Over Ons</a>
        <a href="#" class="btn-contact">Contact</a>
    </nav>
</header>

<main class="card-grid">
    <article class="card">
        <h3>Branding</h3>
        <p>Visuele identiteiten en logo-ontwerp voor moderne merken.</p>
    </article>
    <article class="card">
        <h3>Webdesign</h3>
        <p>Unieke, gebruiksvriendelijke interfaces ontworpen in Figma.</p>
    </article>
    <article class="card">
        <h3>Development</h3>
        <p>Schoon gecodeerde websites met HTML, CSS en Flexbox.</p>
    </article>
</main>

CSS (style.css)

/* Algemene reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8fafc;
    padding: 20px;
}

/* 1. FLEXIBELE NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo links, links rechts */
    align-items: center;            /* Verticaal perfect in het midden */
    background-color: #0f172a;
    padding: 16px 32px;
    border-radius: 8px;
    color: #ffffff;
}

.logo {
    font-size: 1.25rem;
    font-weight: bold;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px; /* Ruimte tussen de navigatielinks */
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: #ffffff;
}

.btn-contact {
    background-color: #2563eb;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 6px;
}

/* 2. RESPONSIEF CARD GRID */
.card-grid {
    display: flex;
    flex-wrap: wrap; /* Zorgt dat kaarten naar de volgende regel springen op kleine schermen */
    gap: 24px;
    margin-top: 40px;
}

.card {
    display: flex;
    flex-direction: column; /* Stapelt titel en tekst verticaal binnen de kaart */
    justify-content: space-between;
    flex-grow: 1;           /* Laat de kaarten de beschikbare breedte opvullen */
    width: 280px;           /* Basisbreedte van elke kaart */
    background-color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.card h3 {
    color: #0f172a;
    margin-bottom: 12px;
}

.card p {
    color: #475569;
    line-height: 1.6;
}

---

Samenvatting

• Activeer Flexbox door display: flex; in te stellen op het bovenliggende element (parent).
• Denk altijd in twee assen: de hoofdas (flex-direction) en de dwarsas.
• Gebruik justify-content om ruimte te verdelen langs de hoofdas (center, space-between).
• Gebruik align-items om elementen uit te lijnen langs de dwarsas (center, stretch).
• Sta meerdere regels toe met flex-wrap: wrap; en beheer de onderlinge afstand strak met gap.
• Gebruik flex-grow en flex-shrink op individuele flex items om te bepalen hoe ze meeschalen in je lay-out.