Flexbox

Wat ga je leren?

Flexbox zet elementen naast elkaar en lijnt ze uit. Het is het gereedschap waar je in CSS het vaakst naar grijpt voor lay-out.

Theorie

Wat is rem?

In de voorbeelden hieronder staan groottes als 1.5rem. Dat betekent "anderhalf keer de basisgrootte van de pagina". Je hoeft er nu niets mee te doen; het hele verhaal over px, rem, em en % staat in Eenheden in CSS.

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 en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Voeg justify-content: center toe aan .container. Wat verandert er?
   Antwoord

   De drie items schuiven samen naar het midden van de grijze balk. justify-content verdeelt de vrije ruimte in de rij, en center zet die links en rechts.
2. Zet justify-content: space-between op .container. Wat doet dat?
   Antwoord

   Item 1 staat helemaal links, item 3 helemaal rechts en item 2 in het midden. De vrije ruimte komt tussen de items, niet aan de randen.
3. Voeg flex-direction: column toe aan .container. Hoe staan de items nu?
   Antwoord

   Onder elkaar, en elk zo breed als de grijze container. De items volgen elkaar nu van boven naar beneden in plaats van van links naar rechts.
4. Zet onderaan de CSS .item:first-child { padding: 60px 30px; }. Hoe hoog worden item 2 en 3? Voeg daarna align-items: center toe aan .container.
   Antwoord

   Eerst rekken item 2 en 3 uit tot de hoogte van item 1; dat doet flexbox vanzelf. Met align-items: center worden ze weer zo hoog als hun inhoud en staan ze in het midden naast item 1.

Editor laden...

Modify

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

Editor laden...

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.

Editor laden...

Tip

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

Antwoord

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

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

.menulink {
  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.