Les 9 – Flexbox

Wat ga je leren?

Je leert hoe je elementen naast elkaar zet en uitlijnt met Flexbox — het meest gebruikte hulpmiddel voor lay-out in CSS.

Theorie

Standaard staan HTML-elementen als blokken onder elkaar. Met display: flex op een container zet je de elementen naast elkaar:

.container {
  display: flex;
}

Alle directe kinderen van de container worden dan flex-items.

Handige flex-eigenschappen

Eigenschap	Op de container	Voorbeeld
flex-direction	Richting van de items	row (standaard) of column
justify-content	Uitlijning langs de hoofdas	flex-start, center, space-between
align-items	Uitlijning op de dwarsas	flex-start, center, stretch
gap	Ruimte tussen de items	gap: 16px;

Predict

Wat denk je dat er gebeurt als je flex-direction: column toevoegt aan de container?

Klik hier voor het antwoord

De items komen onder elkaar te staan, in plaats van naast elkaar. column verandert de richting van horizontaal naar verticaal.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer met de CSS:

• Voeg justify-content: center toe aan .container — wat verandert er?
• Probeer justify-content: space-between — wat doet dat?
• Voeg flex-direction: column toe — hoe staan de items nu?
• Wat doet align-items: center als je de container een vaste hoogte geeft (height: 200px)?

Modify

Opdracht: Centreer de items horizontaal én voeg een vierde item toe.

Tip

Gebruik justify-content: center op de container. Voeg een nieuw <div class="item">4</div> toe in de HTML.

Antwoord

CSS toevoeging:

.container {
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: #eee;
  padding: 10px;
}

HTML toevoeging:

<div class="item">4</div>

Make

Opdracht: Bouw een standaard header voor een website. Maak een flex-container (bijvoorbeeld een <header>) met daarin twee onderdelen: een logo (bijvoorbeeld een <h1>) en een navigatiemenu (bijvoorbeeld een <nav> met wat links erin). Gebruik Flexbox om het logo helemaal links te zetten en de navigatie helemaal rechts, en centreer ze verticaal.

Tip

Geef de header de eigenschappen display: flex;, justify-content: space-between; en align-items: center;.

Antwoord

<!-- HTML -->
<header>
  <h1>MijnSite</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Over Ons</a>
    <a href="#">Contact</a>
  </nav>
</header>

/* CSS */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  padding: 10px 20px;
}

nav a {
  margin-left: 15px;
  text-decoration: none;
  color: black;
}

Er gaat iets mis

display: flex op het verkeerde element

/* Fout: flex op het item zelf, niet de container */
.item {
  display: flex;
}

Flexbox werkt op de container — het element dat de items bevat. Als je display: flex op de items zelf zet, heeft dat geen effect op hoe ze naast elkaar staan. Zet display: flex altijd op het omhullende element.