Flexbox

Flexbox lays things out along a single line. Everything it does follows from which line that is.

Setting display: flex on a container turns its children into flex items and picks a main axis — by default horizontal, left to right. The other direction is the cross axis. Almost every flexbox property is just "do something along one of those two".

justify-content moves items along the main axis: flex-start, center, flex-end, and the space-* values that distribute the leftover room. align-items does the same job on the cross axis.

That pairing is the whole trick to centring. justify-content: center puts an item in the middle horizontally, align-items: center does it vertically, and together they centre it properly — the thing CSS was mocked for being unable to do for a decade.

flex-direction: column swaps the axes. Everything you learned still applies, it just points the other way — which is why it is worth learning the axes rather than memorising which property is horizontal.

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Spread the children across the line, and centre them on the other axis.

Exercises0/5

  1. 1Push it to the endjustify-contentaccount
  2. 2Dead centrejustify-content · align-itemsaccount
  3. 3Spread them outjustify-content: space-betweenaccount
  4. 4Out of orderorderaccount
  5. 5One goes its own wayalign-selfaccount
Flexbox — Beginner · CSS Duel