Flexbox centering & layout

The two axes

Flexbox lays children out along a main axis and a cross axis. By default the main axis is horizontal.

.container {
  display: flex;
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

Centering

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

Spacing children evenly

.container {
  display: flex;
  justify-content: space-between; /* or space-around, space-evenly */
}

Growing / shrinking

.item {
  flex: 1; /* grow to fill available space, share equally with siblings */
}

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0;.

Wrapping

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

gap works in flex containers just like it does in grid — no need for margin hacks.

Browser support

✅ Chrome ✅ Firefox ✅ Safari ✅ Edge — flexbox has been fully supported everywhere for years.