Wat is Flexbox en hoe centreer je content ermee?

Question

Accepted Answer

**Flexbox** is een eendimensionaal layout-systeem — het rangschikt items in een enkele **rij** of **kolom** en verdeelt ruimte langs die lijn. Het is het moderne antwoord op uitlijnings- en afstandsproblemen die voorheen floats en hacks vereisten.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## De twee assen

Flexbox heeft een **main axis** (de richting waarin items stromen) en een **cross axis** (loodrecht daarop). De eigenschappen zijn eraan gekoppeld:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Perfecte centrering — het beroemde gebruik

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Die drie regels centreren een child zowel horizontaal als verticaal — een taak die voor Flexbox notoir moeilijk was.

## Veelvoorkomende patronen

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` opties zijn onder meer `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Waarom het belangrijk is

Flexbox is het dagelijks gereedschap voor navigatiebalken, knoppengroepen, kaartrijnen, centrering en elke "rij items" layout.

Het begrijpen van het main/cross axis-model (en dat `justify-content`/`align-items` van betekenis veranderen wanneer je `flex-direction` wijzigt) is het sleutelconcept.

Gebruik Flexbox voor 1D-layouts en Grid voor 2D-layouts.