Flexbox: layout without tears

Before flexbox, centring a box took folklore and prayer. Flexbox lets a parent element arrange its children in a row or column, and it is three lines for most layouts.

nav {
  display: flex;
  justify-content: space-between; /* push apart */
  align-items: center;            /* centre vertically */
  gap: 16px;                      /* space between items */
}

.cards {
  display: flex;
  flex-wrap: wrap;   /* drop to a new row when needed */
  gap: 16px;
}

The three lines that do 80% of layout

• display: flex — start arranging children.
• gap — the space between them (no more margin hacks).
• flex-wrap: wrap — let rows wrap on small screens instead of squashing.

On phones, a flex row with wrap becomes a stacked column automatically when items run out of width. That is responsive design before you have written a media query.