Lesson 22 +10 XP

Flex Alignment & Spacing

Flex Alignment & Spacing

Position flex items along both axes and distribute free space.

Justify content (main axis)

Class	CSS
`justify-start`	start
`justify-end`	end
`justify-center`	center
`justify-between`	space-between
`justify-around`	space-around
`justify-evenly`	space-evenly

<div class="flex justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

Align items (cross axis)

Class	CSS
`items-start`	start
`items-end`	end
`items-center`	center
`items-baseline`	baseline
`items-stretch`	stretch (default)

Perfect centering

flex items-center justify-center centers content both ways:

<div class="flex h-32 items-center justify-center">Centered</div>

Gap

Space between items without relying on margins:

<div class="flex gap-4">
  <div>One</div>
  <div>Two</div>
</div>

gap-<n> - both axes.
gap-x-<n> - horizontal only.
gap-y-<n> - vertical only.

TL;DR

justify-* works along the main axis.
items-* works along the cross axis.
items-center justify-center centers perfectly.
gap-* spaces items out cleanly.