• Flexbox
• Last updated on January 14, 2018

Alignment

Flexbox offers a few ways to align content…

The primary axis

The justify-content property tells Flexbox how to align your containers along the primary axis, and has several possible values…

• flex-start - Pack items from the start (default)
• flex-end - Pack items from the end
• center - Pack items around the center
• space-between - Distribute items evenly. The first item is flush with the start. The last is flush with the end.
• space-around - Distribute items evenly. Start and end gaps are half the size of the space between each item.
• space-evenly - Distribute items evenly. Start, in-between, and end gaps have equal sizes.

Having all of these options is very powerful, but also a little confusing. I personally find having a demo to visually see the differences is useful.

The secondary axis

Similarly, the align-items property tells flexbox how to align the containers along the secondary axis.

It also has several values. Some of them are the same as the ones for justify-content, but some are not…

• stretch - Stretch containers to match the biggest one (default)
• flex-start - Align items to the start of the axis
• flex-end - Align items to the end of the axis
• center - Center items along the axis

Once again, a demo is helpful.