Flexbox also allows us to control how the child elements are positioned within our parent flexbox.
The property to control this aspect is the
We have already used the
center value of this property in previous exercises.
center, there are 5 more options available.
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-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.
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.
justifyContent property on the layout and set it to
Well done! Although they look a bit crowded at the bottom…
justifyContent property so that they are spaced evenly.