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
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.