Skip to main content

Flexbox alignment memory

· 2 min read
Imagine Chiu
Imagine Chiu
Front End Engineer @ Acrool

As a front-end engineer, I have never had a very systematic way to use Flexbox alignment. I often use align-item-center when I need to align to center, and if that doesn't work, I'll try justify-content-center. If that still doesn't work... well, it should be a parent container height problem.

It's time to come up with a way to remember it today.

Main axis and cross axis​

First, figure out who is the main axis and who is the cross axis

flexbox-alignment.png

  • justify-content control main axis alignment
  • align-items control cross axis alignment

Row (Arrange horizontally)​

Row is horizontal alignment, so controlling the alignment of the main axis is horizontal alignment.

Flex
align-self
Flex

Column (vertical arrangement)​

Column is a vertical layout, so controlling the alignment of the main axis is the same as controlling the vertical alignment

Flex
align-self
Flex

Finish​

So we only need to remember that if the current flex direction is flex-row, then to center vertically, we need to control the opposite of the main axis. The cross axis is controlled by align-item. Conversely, if the current flex direction is flex-column, then to center vertically, we need to control the main axis. The main axis is controlled by justify-content.