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-balk voor een website. Maak een flex-container (een <div> met de klasse topbar) met daarin twee onderdelen: een logo (een <h1>) en een menu (een <div> met wat links erin). Gebruik Flexbox om het logo links te zetten en het menu rechts, en centreer ze verticaal.

Tip

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

Antwoord

<!-- HTML -->
<div class="topbar">
  <h1>MijnSite</h1>
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Over Ons</a>
    <a href="#">Contact</a>
  </div>
</div>

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

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

In Semantische HTML leer je hoe je dit nog beter kunt schrijven met <header> en <nav> in plaats van <div>.

Semantische HTML

We gebruikten hierboven <div class="topbar"> en <div class="menu">. In Semantische HTML leer je dat HTML speciale tags heeft voor deze rollen: <header> en <nav>. Die werken hetzelfde als <div>, maar vertellen ook wat een stuk pagina is — goed voor screenreaders en zoekmachines.

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.