CSS Flexbox Complete Gids: Van Basis tot Geavanceerde Patterns

CSS Flexbox is het go-to layoutsysteem voor moderne webontwikkeling. Deze complete CSS Flexbox gids behandelt alles van de basis tot geavanceerde patterns.

1. Wat is Flexbox en wanneer gebruiken

Flexbox is een eendimensionaal layoutmodel voor het verdelen van ruimte en uitlijnen van elementen.

/* Use Flexbox when you need: */

/* 1. One-dimensional alignment (row OR column) */
.toolbar { display: flex; gap: 8px; }

/* 2. Content-driven sizing */
.tabs { display: flex; }
.tab { flex: 1; }  /* equal-width tabs */

/* 3. Dynamic ordering */
.card { display: flex; flex-direction: column; }
.card-footer { order: 3; margin-top: auto; }

/* Use CSS Grid instead when you need: */
/* - Two-dimensional control (rows AND columns) */
/* - Layout-driven sizing (template areas) */
/* - Complex page-level layouts */

2. Flex Container: het ouderelement

Alles begint met de flex container. display: flex maakt directe kinderen tot flex items.

/* Block-level flex container */
.container {
  display: flex;
}

/* Inline-level flex container */
.inline-container {
  display: inline-flex;
}

/* flex-direction: controls the main axis direction */
.row      { flex-direction: row; }          /* left to right (default) */
.row-rev  { flex-direction: row-reverse; }  /* right to left */
.col      { flex-direction: column; }       /* top to bottom */
.col-rev  { flex-direction: column-reverse; } /* bottom to top */

/* flex-flow: shorthand for direction + wrap */
.container {
  flex-flow: row wrap;
  /* same as: flex-direction: row; flex-wrap: wrap; */
}

3. Hoofdas vs dwarsas

De twee assen begrijpen is de sleutel tot Flexbox.

/*
 * flex-direction: row (default)
 * ┌──────────────────────────────────────────┐
 * │ ← ← ← ← ← ← MAIN AXIS → → → → → → →  │
 * │                                          │
 * │  ↑   ┌────┐  ┌────┐  ┌────┐             │
 * │  │   │ 1  │  │ 2  │  │ 3  │   CROSS     │
 * │  │   └────┘  └────┘  └────┘   AXIS      │
 * │  ↓                                       │
 * └──────────────────────────────────────────┘
 *
 * flex-direction: column
 * ┌──────────────────┐
 * │ ←CROSS AXIS→     │
 * │                  │
 * │  ↑  ┌────────┐   │
 * │  │  │   1    │   │
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │  MAIN
 * │  │  │   2    │   │  AXIS
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │
 * │  ↓  │   3    │   │
 * │     └────────┘   │
 * └──────────────────┘
 *
 * KEY INSIGHT:
 * - justify-content = main axis
 * - align-items     = cross axis
 * - When flex-direction changes, the axes swap!
 */

4. justify-content: uitlijning op de hoofdas

justify-content bestuurt de verdeling langs de hoofdas.

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* [1][2][3]                    */

  /* Center items */
  justify-content: center;
  /*         [1][2][3]            */

  /* Pack items to the end */
  justify-content: flex-end;
  /*                    [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* [1]        [2]        [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /*   [1]     [2]     [3]      */

  /* Equal space everywhere */
  justify-content: space-evenly;
  /*    [1]    [2]    [3]       */
}

5. align-items: uitlijning op de dwarsas

align-items bestuurt de positionering op de dwarsas.

.container {
  display: flex;
  height: 200px;

  align-items: stretch;     /* Items fill container height (default) */
  align-items: flex-start;  /* Items at the top */
  align-items: center;      /* Items vertically centered */
  align-items: flex-end;    /* Items at the bottom */
  align-items: baseline;    /* Items aligned by text baseline */
}

/* Override for a single item */
.special-item {
  align-self: center;  /* This item centered, others follow container */
}

/* align-content: controls spacing between LINES (only with wrap) */
.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* lines packed to top */
  align-content: center;        /* lines centered */
  align-content: space-between; /* equal space between lines */
}

6. Flex item eigenschappen: grow, shrink, basis

De drie eigenschappen bepalen hoe items beschikbare ruimte delen.

/* flex-grow: how much an item GROWS when extra space exists */
.item { flex-grow: 0; }  /* default: don't grow */
.item { flex-grow: 1; }  /* grow to fill available space */
.item { flex-grow: 2; }  /* grow twice as much as flex-grow: 1 items */

/* flex-shrink: how much an item SHRINKS when space is tight */
.item { flex-shrink: 1; }  /* default: shrink proportionally */
.item { flex-shrink: 0; }  /* never shrink (fixed size) */

/* flex-basis: the STARTING SIZE before grow/shrink */
.item { flex-basis: auto; }   /* use content width (default) */
.item { flex-basis: 0; }      /* start from zero, grow equally */
.item { flex-basis: 200px; }  /* start from 200px */
.item { flex-basis: 25%; }    /* start from 25% of container */

/* flex shorthand (recommended) */
.item { flex: 1; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
/* Items grow equally from zero — equal widths */

.item { flex: auto; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* Items grow from content size — proportional widths */

.item { flex: none; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: auto */
/* Items are inflexible — use content width only */

.item { flex: 0 0 200px; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
/* Fixed 200px item that never grows or shrinks */

7. Flex Wrap en meerregelige layouts

flex-wrap laat items doorlopen naar de volgende regel.

.container {
  display: flex;

  flex-wrap: nowrap;        /* default — single line, may overflow */
  flex-wrap: wrap;          /* wrap to next line when needed */
  flex-wrap: wrap-reverse;  /* wrap in reverse order */
}

/* Practical example: responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min-width 300px */
  max-width: 400px;  /* cap maximum width */
}
/* Result:
 * Wide screen:  [card] [card] [card] [card]
 * Medium:       [card] [card] [card]
 *               [card]
 * Narrow:       [card]
 *               [card]
 *               [card]
 *               [card]
 */

8. De gap eigenschap

gap voegt ruimte toe tussen items zonder buitenste marges.

.container {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;              /* equal gap in both directions */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */
  row-gap: 20px;          /* vertical spacing only */
  column-gap: 12px;       /* horizontal spacing only */
}

/* Why gap is better than margins: */

/* Old approach (margins) - awkward edge spacing */
.item { margin: 8px; }
/* Creates 8px margin on ALL sides, including outer edges */
/* Need negative margins on container to compensate */

/* Modern approach (gap) - clean spacing */
.container { display: flex; gap: 16px; }
/* Space ONLY between items, not on outer edges */

9. Veelgebruikte Flexbox layout patterns

De meest gebruikte Flexbox patterns in echte projecten.

Perfect Centering

/* Center anything horizontally and vertically */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* or any fixed height */
}

/* Alternative: margin auto trick */
.parent { display: flex; height: 100vh; }
.child  { margin: auto; }  /* centers in both axes */

Navigation Bar

/* Logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Logo left, links center, actions right */
.navbar-3-section {
  display: flex;
  align-items: center;
}
.navbar-3-section .logo    { flex: 1; }
.navbar-3-section .links   { flex: 0; display: flex; gap: 24px; }
.navbar-3-section .actions { flex: 1; display: flex; justify-content: flex-end; }

Sticky Footer

/* Footer stays at bottom even with short content */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header { flex-shrink: 0; }   /* fixed height */
main   { flex: 1; }          /* fills all remaining space */
footer { flex-shrink: 0; }   /* fixed height, stays at bottom */

Sidebar Layout

/* Fixed sidebar + fluid main content */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px;  /* fixed 280px, never grow or shrink */
}

.main-content {
  flex: 1;          /* takes remaining space */
  min-width: 0;     /* prevents overflow */
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Equal-Height Cards

/* Cards in a row, all same height, button at bottom */
.card-row {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;  /* fills remaining space, pushing footer down */
}

.card-footer {
  margin-top: auto;  /* always at the bottom */
}

10. Flexbox vs CSS Grid

Flexbox en CSS Grid zijn complementair.

/* Use BOTH together for best results: */

/* Grid for page layout */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

/* Flexbox for components inside grid areas */
.header {
  grid-area: header;
  display: flex;              /* Flexbox inside Grid */
  justify-content: space-between;
  align-items: center;
}

Veelgestelde vragen

Hoe centreer ik een div met Flexbox?

display: flex; justify-content: center; align-items: center; height: 100vh.

Verschil tussen flex: 1 en flex: auto?

flex: 1 groeit vanaf nul, flex: auto vanaf de inhoudsgrootte.

Waarom loopt mijn flex item over?

Voeg min-width: 0 toe.

Flexbox voor een volledige paginalayout?

Ja, met flex-direction: column en min-height: 100vh.

Browserondersteuning voor Flexbox?

Meer dan 99% wereldwijde ondersteuning.

Flexbox is een essentiële vaardigheid. Oefen met onze tools.