CSS Flexbox

Flexbox lays out items in a row or column and handles alignment, order, and space distribution — no floats required.

The flex container

A flex container is created with display: flex. Its direct children become flex items.

.toolbar {
  display: flex;
  gap: 0.75rem;
}

Main axis and cross axis

Flex follows an axis direction. With flex-direction: row (default) the main axis is horizontal; with column it’s vertical.

.sidebar { flex-direction: column; }

justify-content and align-items

• justify-content — alignment along the main axis
• align-items — alignment along the cross axis

.hero {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}

Common values: flex-start, center, flex-end, space-between, space-around.

Growing and shrinking

flex: 1 lets an item grow to fill available space. flex: 0 0 auto keeps its natural size.

.item { flex: 1; }

The centering trick

Flexbox makes perfect centering one line:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}