Learn

Flexbox also allows us to control how the child elements are positioned within our parent flexbox. The property to control this aspect is the justifyContent property. We have already used the center value of this property in previous exercises.

Besides center, there are 5 more options available. The options flex-start and flex-end are related to the parent flexbox. They both mean: “position the child elements where the parent flexbox starts or ends”. The other options space-around, space-between, and space-evenly are related to where gaps should be placed between the child elements.

  • center renders child elements within the center of our parent flexbox.
  • flex-start renders child elements at the start of our parent flexbox.
  • flex-end renders child elements at the end of our parent flexbox.
  • space-around renders child elements with remaining space around these elements.
  • space-between renders child elements with remaining space between the elements, without space at the start or end.
  • space-evenly renders child elements with remaining space evenly divided, including space at the start and end.

Instructions

1.

justifyContent settings are easier to see when the boxes have a set height. We’ve removed the flex: 1 styling and replaced it with a fixed dimension.

By default, the container is set to flex-start. Let’s move the boxes to the end of the container.

Add the justifyContent property on the layout and set it to flex-end.

2.

Well done! Although they look a bit crowded at the bottom…

Edit the justifyContent property so that they are spaced evenly.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?