Flexbox: Vertical alignment using align-self

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

An item can choose to override the container align-items setting, using align-self, which has the same 5 possible values of align-items:

  • flex-start: align to the top of the container.
  • flex-end: align to the bottom of the container.
  • center: align at the vertical center of the container.
  • baseline: display at the baseline of the container.
  • stretch: items are stretched to fit the container.

Vertical alignment

Lessons in this unit:

0: Introduction
1: Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: Moving items before / after another one using order
5: ▶︎ Vertical alignment using align-self
6: Grow or shrink an item if necessary
7: Create a layout using Flexbox
8: How to have a flex child not fill entire height