🔲 Flexbox

De flex-container aanzetten

Alles begint bij display: flex op de parent. Alle directe children worden automatisch flex-items.

.container {
  display: flex;

  /* Richting van de hoofdas */
  flex-direction: row;          /* standaard: links → rechts */
  flex-direction: row-reverse;  /* rechts → links */
  flex-direction: column;       /* boven → onder */
  flex-direction: column-reverse;

  /* Uitlijning op de HOOFDAS (standaard: horizontaal) */
  justify-content: flex-start;   /* standaard: links uitlijnen */
  justify-content: flex-end;     /* rechts uitlijnen */
  justify-content: center;       /* centreren */
  justify-content: space-between;/* eerste/laatste aan rand, rest verdeeld */
  justify-content: space-around; /* gelijke ruimte rondom elk item */
  justify-content: space-evenly; /* gelijke ruimte tussen alle items */

  /* Uitlijning op de DWARSAS (standaard: verticaal) */
  align-items: stretch;    /* standaard: vul volledige hoogte */
  align-items: flex-start; /* bovenaan uitlijnen */
  align-items: flex-end;   /* onderaan uitlijnen */
  align-items: center;     /* verticaal centreren ⭐ */
  align-items: baseline;   /* uitlijnen op tekstlijn */

  /* Ruimte tussen items */
  gap: 16px;           /* gelijke gap horizontal + vertical */
  gap: 8px 16px;       /* row-gap  column-gap */

  /* Doorbreken naar nieuwe rij als er te weinig ruimte is */
  flex-wrap: nowrap;   /* standaard: alles op één rij (kan overlappen) */
  flex-wrap: wrap;     /* items gaan naar volgende rij */
}

justify-content visueel

Op de hoofdas (standaard: horizontaal) bepaalt justify-content hoe items verdeeld worden.

Flex-item properties

Op de items zelf stel je in hoe ze groeien, krimpen en hoe groot ze standaard zijn.

.item {
  /* flex-grow: mag het item groeien om resterende ruimte te vullen? */
  flex-grow: 0;   /* standaard: nee */
  flex-grow: 1;   /* ja, neemt evenredig deel van resterende ruimte */

  /* flex-shrink: mag het item krimpen als er te weinig ruimte is? */
  flex-shrink: 1; /* standaard: ja */
  flex-shrink: 0; /* nee — item houdt altijd z'n breedte */

  /* flex-basis: startbreedte vóór groeien/krimpen */
  flex-basis: auto; /* standaard: gebruik width of content */
  flex-basis: 200px;
  flex-basis: 0;    /* begin bij 0, groei daarna */

  /* Shorthand: grow shrink basis */
  flex: 1;         /* = flex: 1 1 0  — meest gebruikte patroon ⭐ */
  flex: 0 0 200px; /* vaste breedte 200px, groeit/krimpt niet */
  flex: none;      /* = 0 0 auto — nooit groeien/krimpen */

  /* Individuele uitlijning (overschrijft align-items van parent) */
  align-self: center;
  align-self: flex-end;

  /* Volgorde (standaard: DOM-volgorde) */
  order: 0;   /* standaard */
  order: -1;  /* naar voren */
  order: 2;   /* naar achteren */
}

Veelgebruikte Flexbox-patronen

.centrer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* container heeft hoogte nodig */
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
}

.kaarten {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.kaart {
  flex: 1 1 250px; /* minimaal 250px, groeit daarna mee */
}

.layout {
  display: flex;
  gap: 24px;
}
.sidebar { flex: 0 0 240px; } /* vaste breedte */
.content  { flex: 1; }         /* neemt de rest */

flex-wrap & align-content

Met flex-wrap: wrap gaan items naar de volgende rij als er te weinig ruimte is. align-content regelt de verdeling van de rijen zelf.

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start; /* rijen bovenaan houden */
}
.item {
  flex: 1 1 150px; /* minimaal 150px breed */
}

Verklein je browser om te zien hoe items doorbreken naar een nieuwe rij.

Oefening 1 – Navigatiebalk

Bouw een complete navigatiebalk met Flexbox:
• body: margin 0, font-family sans-serif
• nav: display flex, align-items center, justify-content space-between, background #0f172a, padding 0 24px, height 60px
• .logo: kleur #2dd4bf, font-weight 700, font-size 18px, text-decoration none
• .links: display flex, gap 24px, list-style none, margin 0, padding 0
• .links a: kleur #94a3b8, text-decoration none, font-size 14px

<nav>
  <a href="#" class="logo">⚡ Site</a>
  <ul class="links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Over</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Oefening 2 – Kaartenrij

Maak een rij kaarten die wrappen bij te weinig ruimte:
• body: margin 0, padding 24px, background #f1f5f9, font-family sans-serif
• .rij: display flex, flex-wrap wrap, gap 16px
• .kaart: flex 1 1 200px, background wit, border-radius 12px, padding 20px, box-shadow 0 2px 8px rgba(0,0,0,0.1)
• .kaart h3: margin 0 0 8px 0, color #0f172a
• .kaart p: margin 0, color #64748b, font-size 14px

<div class="rij">
  <div class="kaart">
    <h3>HTML</h3>
    <p>De basis van elke website.</p>
  </div>
  <div class="kaart">
    <h3>CSS</h3>
    <p>Stijl en lay-out.</p>
  </div>
  <div class="kaart">
    <h3>JavaScript</h3>
    <p>Interactiviteit.</p>
  </div>
</div>

Quiz