Justify-content

This lesson will introduce you to the justify-content Flexbox container settings. We will learn the possible values of justify-content to position our Flexbox items on the main axis.

We'll cover the following

Justify-content

Let’s recall the properties of the main axis and the cross axis of a Flex container:

  • If the flex-direction property is row or row-reverse, the main axis is horizontal. Otherwise, the main axis is vertical.
  • If the flex-direction property is column or column-reverse, the main axis is vertical. Otherwise, the main axis is horizontal.

Let’s recall the previous exercise, but this time, we will only display the 600px breakpoint:

Get hands-on with 1400+ tech skills courses.