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.
centerrenders child elements within the center of our parent flexbox.flex-startrenders child elements at the start of our parent flexbox.flex-endrenders child elements at the end of our parent flexbox.space-aroundrenders child elements with remaining space around these elements.space-betweenrenders child elements with remaining space between the elements, without space at the start or end.space-evenlyrenders child elements with remaining space evenly divided, including space at the start and end.
Instructions
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.
Well done! Although they look a bit crowded at the bottom…
Edit the justifyContent property so that they are spaced evenly.