Visit Pixel Rocket

Align Items - Start

See how align-items controls how flex items align along the cross axis.

See Finish Next: Flex Wrap

stretch (default)

Short
Medium content here
Much longer content that takes up more space
with a line break

Items stretch to fill the cross axis height

flex-start

Short
Medium content here
Much longer content that takes up more space
with a line break

Items align to the start of the cross axis

flex-end

Short
Medium content here
Much longer content that takes up more space
with a line break

Items align to the end of the cross axis

center

Short
Medium content here
Much longer content that takes up more space
with a line break

Items are centered along the cross axis

baseline

Small
Medium
Large

Items align to their text baseline regardless of font size

Key Takeaways

  • align-items controls alignment along the cross axis
  • Cross Axis Alignment Values:
    • stretch - Items fill available height (default)
    • flex-start - Items align to cross axis start
    • flex-end - Items align to cross axis end
    • center - Items center on cross axis
    • baseline - Items align to text baseline
  • When flex-direction changes, the cross axis direction changes too
  • Use align-self to override alignment for individual items
  • Perfect for creating equal-height cards and consistent vertical spacing