Waarvoor wordt flex in CSS gebruikt?

Flexbox wordt gebruikt om eendimensionale indelingen van elementen in een container te maken. Het stelt je in staat om uitlijning, ruimteverdeling en de volgorde van elementen te beheren.

Belangrijke concepten:

• Flex Container: Ouderelement waaraan display: flex of display: inline-flex wordt toegekend.
• Flex Items: Kind-elementen van de Flex Container.
• Hoofdas: De hoofdas van de Flex Container. Gedefinieerd door de eigenschap flex-direction. Standaard horizontaal (row).
• Kruis As: De perpendiculare as op de Hoofdas.

Belangrijke eigenschappen voor de Flex Container:

• display: Bepaalt dat het element een flex-container is (flex of inline-flex).
• flex-direction: Stelt de richting van de hoofdas in (row, row-reverse, column, column-reverse).
• justify-content: Lijnt de flex-items uit langs de hoofdas (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Lijnt de flex-items uit langs de kruis-as (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Bepaalt of de flex-items naar een nieuwe regel/kolom moeten worden gewikkeld bij gebrek aan ruimte (nowrap, wrap, wrap-reverse).

Belangrijke eigenschappen voor Flex Items:

• order: Bepaalt de visuele volgorde van het flex-item (standaard 0).
• flex-grow: Bepaalt hoeveel het flex-item kan groeien ten opzichte van anderen (standaard 0).
• flex-shrink: Bepaalt hoeveel het flex-item kan krimpen ten opzichte van anderen (standaard 1).
• flex-basis: Stelt de beginmaat van het flex-item in voordat de vrije ruimte wordt verdeeld (standaard auto).
• align-self: Overschrijft de uitlijning van het flex-item langs de kruis-as voor een specifiek item.

Voorbeeld van gebruik:

.container {
  display: flex;
  justify-content: center; /* Centrerend langs de hoofdas */
  align-items: center; /* Centrerend langs de kruis-as */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

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

Dit maakt het gemakkelijk om elementen te centreren, responsieve raster te maken en de ruimte tussen elementen te beheren.