Flexbox

Parent and children

Flexbox works on two levels. The parent with display: flex is the flex container. Its direct children are flex items, and they line up in a row by default.

Two axes

The main axis is the direction items flow: left to right for a row, top to bottom for a column. The cross axis runs across it. justify-content arranges items along the main axis; align-items aligns them along the cross axis.

.navbar {
  display: flex;
  flex-direction: row;            /* default; column stacks them */
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 16px;                      /* space between items */
}

Wrapping

By default items stay on one line and shrink. flex-wrap: wrap lets them move to the next line when there is no room, which is useful for tags, filter chips or a row of cards on a phone.

Growing and shrinking

.search-bar { display: flex; gap: 8px; }
.search-bar input  { flex: 1; }      /* take all the free space */
.search-bar button { flex: none; }   /* keep its natural size */

flex is a shorthand for three values: flex-grow (how much to grow), flex-shrink (how much to shrink) and flex-basis (the starting size). flex: 1 is the most common setting.

Perfect centring

.center-me {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}