Flex Alignment

Getting things centered used to be the hardest part of CSS. With flexbox alignment properties, centering is almost too easy. You will find yourself wondering how we ever lived without them.

Justify Content

justify-content controls alignment along the main axis. It distributes space between and around items.

.container {
  display: flex;
  justify-content: center;      /* center items */
  justify-content: flex-start;  /* pack at start (default) */
  justify-content: flex-end;    /* pack at end */
  justify-content: space-between; /* equal space between items */
  justify-content: space-around;  /* space around each item */
  justify-content: space-evenly;  /* equal space everywhere */
}
    

space-between is great for navigation bars. center is perfect for centering a group of buttons or cards.

Align Items

align-items controls alignment along the cross axis. It is how you handle vertical centering.

.container {
  display: flex;
  align-items: center;      /* center vertically */
  align-items: flex-start;  /* top */
  align-items: flex-end;    /* bottom */
  align-items: stretch;     /* fill container height (default) */
  align-items: baseline;    /* align text baselines */
}
    

align-items: center is the simplest way to vertically center something. Combine it with justify-content: center and you get perfect centering both ways.

Align Self

Sometimes you want one item to break away from the group alignment. align-self overrides align-items for a single flex item.

.item {
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
}
    

This is useful when you have a row of items and one needs to be at the bottom while the rest are centered.

Align Content

align-content only works when you have multiple rows of flex items (with flex-wrap: wrap). It controls how the rows are spaced along the cross axis.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-content: space-between;
  align-content: stretch;
}
    

The Gap Property

Adding space between flex items used to require margins. Now you can just use gap:

.container {
  display: flex;
  gap: 20px;         /* space between items */
  gap: 10px 20px;    /* row-gap and column-gap */
}
    

No more margin hacks. gap is clean, intuitive, and works perfectly with flexbox.