Flexbox

Flexbox lays out a group primarily in one direction. It is ideal for navigation bars, button rows, media objects, and component internals where content size should influence distribution.

Start with the axes

01.header {
02  display: flex;
03  align-items: center;
04  justify-content: space-between;
05  gap: 1rem;
06}

flex-direction defines the main axis. justify-content distributes space on that axis; align-items aligns items across it.

Let items grow and shrink

01.toolbar { display: flex; gap: 0.75rem; }
02.toolbar__search { flex: 1 1 18rem; min-width: 10rem; }
03.toolbar__actions { flex: 0 0 auto; }

The three flex values are grow, shrink, and basis. A flexible search field can absorb free space while actions keep their intrinsic width.

Wrap when space runs out

01.tags {
02  display: flex;
03  flex-wrap: wrap;
04  gap: 0.5rem;
05}

Wrapping is useful when the number or width of items varies. For row-and-column alignment across multiple lines, Grid is usually a better fit.

Keep this

Use Flexbox for one-dimensional relationships, understand both axes, prefer gap for spacing, and keep DOM order meaningful.