Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

January 17, 2021

Last updated November 5, 2023

Intro to CSS Flexbox - Align Items

CSS align-items sets the default behavior for how flex items are positioned along the cross axis on the current line. Think of this as the justify-content equivalent of the cross-axis relative to flex items within a flex container.

You'll often reach for this property to make the flex items within a parent container all consistently aligned on a baseline or align to top/bottom.

  • stretch (default): flex items stretch to fill the container (still respect min-width/max-width)
  • flex-start / start / self-start: flex items are placed at the start of the cross axis.
  • flex-end / end / self-end: flex items are placed at the end of the cross axis.
  • center: flex items are centered in the cross-axis
  • baseline: flex items are aligned so their baselines align
Link this article
Est. reading time: 42 seconds
Stats: 859 views

Collection

Part of the CSS Flexbox collection

Products and courses