Waarvoor wordt Flexbox gebruikt?

Flexbox wordt gebruikt om flexibele en responsieve lay-outs te maken in CSS. Het maakt het gemakkelijk om elementen binnen de container uit te lijnen en te verdelen, waarbij hun grootte en positie automatisch worden aangepast op basis van de beschikbare ruimte.

Belangrijke concepten van Flexbox:

• Flex-container: Het element waarop display: flex; of display: inline-flex; wordt toegepast. Het bevat flex-elementen.
• Flex-elementen: Directe kinderen van de flex-container.

Flexbox maakt het mogelijk om te controleren:

• De richting van de elementen (flex-direction).
• Het afbreken van elementen naar de volgende regel/kolom (flex-wrap).
• De uitlijning van de elementen langs de hoofd-as (justify-content).
• De uitlijning van de elementen langs de dwarsas (align-items voor individuele elementen en align-content voor meerdere rijen/kolommen).
• De volgorde van de weergave van de elementen (order).
• De verdeling van de vrije ruimte tussen de elementen (flex-grow, flex-shrink, flex-basis).

Voorbeeld van basisgebruik:

.container {
  display: flex;
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

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