CSS Flexbox

Flexbox is the easiest way to align and distribute elements in a row or column.

Enable Flexbox

.container {
  display: flex;
}

All direct children become flex items. By default they line up in a row.

Direction & Wrapping

.container {
  flex-direction: row;           /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;               /* nowrap | wrap | wrap-reverse */
  /* shorthand */
  flex-flow: row wrap;
}

Alignment

.container {
  justify-content: center;       /* main axis: flex-start|center|flex-end|space-between|space-around */
  align-items: center;           /* cross axis: flex-start|center|flex-end|stretch|baseline */
  gap: 16px;                     /* space between items */
}

/* Center anything perfectly */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flex Items

.item {
  flex: 1;          /* grow to fill available space equally */
  flex: 0 0 200px;  /* don't grow, don't shrink, fixed 200px */
  align-self: flex-end; /* override alignment for this item */
  order: 2;         /* change visual order (default: 0) */
}

Use gap instead of margins between flex items — it only adds space between items, never on the outside edges.

Enable Flexbox

Direction & Wrapping

Alignment

Flex Items

Test Yourself