Flexbox: Vertical alignment using align-self

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: DEMO Create a layout using Flexbox
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!