Flexbox: Vertical and horizontal alignment

By default items start from the left if flex-direction is row, and from the top if flex-direction is column.

Vertical and horizontal alignment

You can change this behavior using justify-content to change the horizontal alignment, and align-items to change the vertical alignment.

Change the horizontal alignment

justify-content has 5 possible values:

  • flex-start: align to the left side of the container.
  • flex-end: align to the right side of the container.
  • center: align at the center of the container.
  • space-between: display with equal spacing between them.
  • space-around: display with equal spacing around them

Horizontal alignment

Change the vertical alignment

align-items has 5 possible values:

  • 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

A note on baseline

baseline looks similar to flex-start in this example, due to my boxes being too simple. Check out this Codepen to have a more useful example, which I forked from a Pen originally created by Martin Michálek. As you can see there, items dimensions are aligned.

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!