CSS Flexbox-tutorial: de complete gids voor flexibele layouts

Flexbox is een CSS-layoutmodule waarmee je flexibele, meeschalende layouts bouwt voor je HTML-elementen. Het komt vooral van pas zodra een layout zich moet aanpassen aan uiteenlopende schermformaten en apparaten.

Met Flexbox lijn je elementen horizontaal of verticaal uit, verdeel je de ruimte ertussen en bepaal je in welke volgorde ze verschijnen. Daarnaast krijg je flexibele manieren om de afmetingen van elementen te sturen, precies wat een responsive layout nodig heeft.

Om Flexbox in je project te gebruiken, definieer je eerst een flexcontainer met de CSS-eigenschap display: flex of display: inline-flex op een HTML-element. Vanaf dat moment sturen de Flexbox-eigenschappen de layout van de kinderen aan.

.container-flex {
    display: flex;
}

Elementen uitlijnen met Flexbox

Een van de handigste kanten van Flexbox is de flexibele uitlijning. Verschillende eigenschappen bepalen hoe de elementen zich binnen een flexcontainer schikken.

Horizontaal uitlijnen met justify-content

De eigenschap justify-content stuurt de horizontale uitlijning van de elementen. 

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

/*lijnt de elementen uit tegen de linkerrand*/
.container {
    justify-content: flex-start;
}
/*centreert de elementen*/
.container {
    justify-content: center;
}
/*lijnt de elementen uit tegen de rechterrand*/
.container {
    justify-content: flex-end;
}
/*verdeelt de elementen gelijkmatig tussen de linker- en de rechterrand, zonder ruimte aan de randen*/
.container {
    justify-content: space-between;
}
/*verdeelt de elementen gelijkmatig tussen de linker- en de rechterrand, met evenveel ruimte aan beide randen*/
.container {
    justify-content: space-around;
}
/* verdeelt de elementen gelijkmatig tussen de linker- en de rechterrand, met evenveel ruimte aan beide randen en tussen elk element */
.container {
    justify-content: space-evenly;
}

Verticaal uitlijnen met align-items

De eigenschap align-items stuurt de verticale uitlijning van de elementen.

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch;

/* Alle elementen bovenaan uitlijnen */
.container {
    align-items: flex-start;
}

/* Alle elementen in het midden uitlijnen */
.container {
    align-items: center;
}

/* Alle elementen onderaan uitlijnen */
.container {
    align-items: flex-end;
}

/*zorgt dat de elementen zich aanpassen aan de hoogte van hun inhoud*/
.container {
    align-items: stretch;
}

De ruimte tussen elementen beheren met Flexbox

Flexbox laat je ook de ruimte tussen de elementen flexibel verdelen. Verschillende eigenschappen bepalen de tussenruimte binnen een flexcontainer.

Ruimte tussen elementen zetten met margin

De eigenschap margin bepaalt de ruimte tussen een element en de elementen eromheen. Daarmee stel je de tussenruimte per element apart in.

/* 20px ruimte tussen elk element toevoegen */
.item {
    margin: 0 20px;
}

Ruimte rond een element zetten met padding

De eigenschap padding bepaalt de ruimte tussen de randen van een element en de inhoud ervan. Daarmee zet je per element ruimte rondom de inhoud.

/* 20px ruimte rond een element toevoegen */
.item {
    padding: 20px;
}

Met gap ruimte tussen de elementen toevoegen

Sinds CSS Grid Layout kan Flexbox gap gebruiken om ruimte tussen de elementen te zetten. Met deze eigenschap leg je een gelijke tussenruimte vast tussen alle elementen van een flexcontainer.

/* 20px ruimte tussen alle elementen toevoegen */
.container {
    gap: 20px;
}

Je combineert deze eigenschap met row-gap en column-gap zodra je rijen en kolommen een verschillende tussenruimte wilt geven. Let op twee dingen: de eigenschap geldt alleen voor de directe kinderen van de flexcontainer, en de browserondersteuning is het controleren waard.

De eigenschappen van Flexbox

Flexbox biedt een hele reeks eigenschappen om flexibele, meeschalende layouts voor je HTML-elementen te bouwen. In dit deel nemen we de meestgebruikte door.

flex-direction

De eigenschap flex-direction bepaalt in welke richting de elementen in een flexcontainer worden geplaatst. Er zijn vier waarden: row, row-reverse, column en column-reverse. De standaardwaarde is row.

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

/* Elementen in een rij plaatsen (standaard) */
.container {
    flex-direction: row;
}

/* Elementen in een omgekeerde rij plaatsen */
.container {
    flex-direction: row-reverse;
}

/* Elementen in een kolom plaatsen */
.container {
    flex-direction: column;
}

/* Elementen in een omgekeerde kolom plaatsen */
.container {
    flex-direction: column-reverse;
}

flex-wrap

De eigenschap flex-wrap bepaalt of de elementen van een flex-container op één regel of op meerdere regels worden geplaatst. Er zijn drie mogelijke waarden: nowrap (standaard), wrap en wrap-reverse, die de regels in omgekeerde volgorde stapelt.

flex-wrap: nowrap;

flex-wrap: wrap;

/* Elementen op één regel plaatsen (standaard) */
.container {
    flex-wrap: nowrap;
}

/* Elementen over meerdere regels plaatsen */
.container {
    flex-wrap: wrap;
}

flex-flow

De eigenschap flex-flow is een snelnotatie voor flex-direction en flex-wrap:

/* Elementen in een rij en over meerdere regels plaatsen */
.container {
    flex-flow: row wrap;
}

justify-content

De eigenschap justify-content bepaalt hoe de elementen op de horizontale as (x) van een flexcontainer worden uitgelijnd. Er zijn meerdere waarden: flex-start, center, flex-end, space-between, space-around en space-evenly. De standaardwaarde is flex-start.

/*lijnt de elementen uit tegen de linkerrand*/
.container {
    justify-content: flex-start;
}
/*centreert de elementen*/
.container {
    justify-content: center;
}
/*lijnt de elementen uit tegen de rechterrand*/
.container {
    justify-content: flex-end;
}
/*verdeelt de elementen gelijkmatig tussen
de linker- en de rechterrand, zonder ruimte aan de randen*/
.container {
    justify-content: space-between;
}
/*verdeelt de elementen gelijkmatig tussen de linkerrand
en de rechterrand, met evenveel ruimte aan beide randen*/
.container {
    justify-content: space-around;
}
/* verdeelt de elementen gelijkmatig tussen de linkerrand
en de rechterrand, met evenveel ruimte aan beide randen en
tussen elk element */
.container {
    justify-content: space-evenly;
}

align-items

De eigenschap align-items bepaalt hoe de elementen op de verticale as (y) van een flexcontainer worden uitgelijnd. Er zijn meerdere waarden: flex-start, center, flex-end, baseline en stretch. De standaardwaarde is stretch.

/* Alle elementen bovenaan uitlijnen */
.container {
    align-items: flex-start;
}

/* Alle elementen in het midden uitlijnen */
.container {
    align-items: center;
}

/* Alle elementen onderaan uitlijnen */
.container {
    align-items: flex-end;
}

/*zorgt dat de elementen zich aanpassen aan de hoogte van hun inhoud*/
.container {
    align-items: stretch;
}

align-content

De eigenschap align-content lijkt op align-items, maar werkt op de regels van een flex-container met meerdere regels. Ze accepteert dezelfde waarden als align-items, plus space-between, space-around en space-evenly om de regels te verdelen.

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

/*lijnt de elementen uit tegen de linkerrand*/
.container {
    justify-content: flex-start;
}
/*centreert de elementen*/
.container {
    justify-content: center;
}
/*lijnt de elementen uit tegen de rechterrand*/
.container {
    justify-content: flex-end;
}
/*verdeelt de elementen gelijkmatig tussen de
linker- en de rechterrand, zonder ruimte aan de
randen*/
.container {
    justify-content: space-between;
}
/*verdeelt de elementen gelijkmatig tussen de rand
links en rechts, met evenveel ruimte aan
beide randen*/
.container {
    justify-content: space-around;
}
/* verdeelt de elementen gelijkmatig tussen de rand
links en rechts, met evenveel ruimte aan beide
randen en tussen elk element */
.container {
    justify-content: space-evenly;
}

order

Met de eigenschap order bepaal je in welke volgorde de elementen van een flexcontainer verschijnen. De waarde is een geheel getal, 0 is de standaardwaarde.

<div class="container">
    <div class="item first">1</div>
    <div class="item second">2</div>
    <div class="item third">3</div>
    <div class="item fourth">4</div>
    <div class="item fifth">5</div>
</div>

.container {
    display: flex;
}
/*zet element 1 op de eerste plaats*/
.first {
    order: -1;
}
/*zet element 3 op de tweede plaats*/
.third {
    order: 2;
}
/*zet element 5 op de laatste plaats*/
.fifth {
    order: 3;
}

Met deze code verschijnen de elementen in deze volgorde: 1, 3, 2, 4, 5

Alle elementen met een ingestelde volgorde worden op die waarde gesorteerd, wie geen waarde krijgt, houdt de standaardwaarde 0. Elementen met een negatieve waarde komen vóór de elementen met een positieve waarde.

Met die waarden kun je spelen tot de weergave klopt. Let op: de volgorde waarin je de CSS-eigenschappen in je bestand schrijft heeft geen enkele invloed op de weergavevolgorde, daarvoor gebruik je order.

flex-grow, flex-shrink et flex-basis

Met de eigenschappen flex-grow, flex-shrink en flex-basis bepaal je de afmeting van de elementen in een flexcontainer.

• flex-grow bepaalt welk deel van de beschikbare ruimte elk element inneemt.
• flex-shrink bepaalt hoeveel een element krimpt om in een kleinere container te passen.
• flex-basis bepaalt de basisgrootte van een element voordat flex-grow en flex-shrink worden toegepast.

flex-grow: 1;

flex-shrink: 1;

flex-basis: 200px;

/* zorgt dat het element
alle beschikbare ruimte inneemt */
.item {
    flex-grow: 1;
}

/* zorgt dat het element krimpt
om in een kleinere container te passen */
.item {
    flex-shrink: 1;
}

/* stelt een basis van 200px in voor een element */
.item {
    flex-basis: 200px;
}

Je combineert die drie eigenschappen in één keer met de eigenschap flex

/* flex: flex-grow | flex-shrink | flex-basi */
.item {
    flex: 1 1 200px;
}

Voorbeelden

Voorbeeld 1: een grid met Flexbox

<div class="container-flex">
  <div class="item-flex item1">1</div>
  <div class="item-flex item2">2</div>
  <div class="item-flex item3">3</div>
  <div class="item-flex item4">4</div>
  <div class="item-flex item5">5</div>
  <div class="item-flex item6">6</div>
  <div class="item-flex item7">7</div>
  <div class="item-flex item8">8</div>
  <div class="item-flex item9">9</div>
</div>

.container-flex {
  display: flex;
  flex-wrap: wrap;
  /* laat het element verdelen over
  meerdere regels als er niet genoeg ruimte is */
  justify-content: space-between;
  /* verdeelt de elementen gelijkmatig
  tussen de linker- en de rechterrand, zonder ruimte
  aan de randen */
  align-content: space-between;
  /* verdeelt de regels gelijkmatig tussen
  boven en onder, zonder ruimte aan de randen */
}
.item-flex {
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  /* gebruikt flex-grow en flex-basis om de
  elementen te verdelen over een raster van 3 kolommen, met
  33.33% van de beschikbare breedte en met
  20px minder ruimte tussen elk element */
}

Met de eigenschap flex bepaal je hoe de elementen zich aanpassen aan de beschikbare ruimte in de flexcontainer. In dit voorbeeld gebruiken we flex: 1 0 calc(33.33% - 20px); om de elementen over een grid van 3 kolommen te verdelen: elk element neemt 33.33% van de beschikbare breedte in, min de 20px tussenruimte. Zo krijg je een grid dat vanzelf meebeweegt met de breedte van het venster.

Door justify-content, align-content en flex te combineren bouw je flexibele layouts die precies op je opmaak aansluiten. Die eigenschappen laten zich op talloze manieren mengen tot een eigen, unieke layout. Experimenteer gerust tot je de combinatie vindt die bij je project past.

Voorbeeld 2: responsive menu

<nav class="menu-container">
  <a href="#" class="menu-item">Home</a>
  <a href="#" class="menu-item">About</a>
  <a href="#" class="menu-item">Services</a>
  <a href="#" class="menu-item">Contact</a>
</nav>

.menu-container {
  display: flex; /* zet de flexlayout aan */
  justify-content: space-between; /* lijnt de menu-items links en rechts uit */
  align-items: center; /* lijnt de menu-items verticaal in het midden uit */
}

/* Voegt een menuknop toe voor kleine schermen */
.menu-container::before {
  content: "Menu"; /* Tekst op de knop */
  display: none; /* verbergt de knop standaard */
}

/* Wanneer het scherm smaller is dan 600px */
@media (max-width: 600px) {
  .menu-container {
    flex-wrap: wrap; /* Laat de elementen over meerdere regels lopen */
    justify-content: center; /* Centreert de elementen horizontaal */
  }
  .menu-item {
    flex-basis: 100%; /* Neemt de volledige beschikbare breedte in */
    text-align: center; /* Centreert de tekst */
  }
  .menu-container::before {
    display: block; /* Toont de menuknop */
  }
}

In dit voorbeeld staat het menu horizontaal en worden de items links en rechts uitgelijnd op bredere schermen (het standaardgedrag). Op kleine schermen (smaller dan 600px) staan de items gecentreerd en lopen ze over meerdere regels, en komt er een knop “Menu” bij om het menu te openen en te sluiten met JavaScript of een ander middel naar keuze. Wil je een uitgebreider voorbeeld van een menu met flexbox, daar heb ik een apart artikel over geschreven.

Conclusie

Met de CSS-eigenschap Flexbox bouw je zonder moeite flexibele, meeschalende layouts voor je HTML-elementen. Met eigenschappen als display, justify-content, align-items en flex lijn je de elementen in een flexcontainer efficiënt uit en breng je er ordening in aan.

Flexbox is vooral sterk voor contentgrids, menu’s en responsive formulieren, omdat het de beschikbare ruimte verdeelt naar de behoefte van je opmaak. Het is geen wondermiddel voor elk layoutprobleem, maar het lost een reeks veelvoorkomende gevallen elegant op. In de praktijk wordt het vaak gecombineerd met andere layouttechnieken zoals Grid Layout of met layoutframeworks zoals Bootstrap.

Kortom: Flexbox is een krachtig gereedschap voor webdevelopers die flexibele, meeschalende layouts voor websites en applicaties bouwen. Ken je de basiseigenschappen en hun toepassing, dan haal je er het meeste uit. Vergeet niet de browserondersteuning te controleren voordat je het in je projecten inzet.

Die compatibiliteit laat zich trouwens automatiseren bij het builden: PostCSS voegt de vendorprefixes toe op basis van de browserlijst die je target. De opzet staat beschreven in de Webpack 5-gids, inclusief de valkuil van de query last 2 versions, die Internet Explorer weer binnenhaalt en je CSS volstopt met dode prefixes.