By default, we saw that
the flex items are placed at
the beginning of the container
depending on the flex direction,
with least spacing between the
items.
In case of row-reverse, the items
begin from right. With column,
from the top and with column-reverse,
from the bottom.
The justify-content property
is used to change this behaviour.
We can use the values flex-start,
flex-end, center,
space-between, space-around
and
space-evenly:
This is what each of the values does:
flex-start
Items are placed at the beginning of the container, which is the default value.
flex-end
Items are placed at the end of the container.
center
Items are placed in the center.
space-between
There is as much space between the items as can be evenly distributed.
space-around
The spaces between the items are double the space on both ends of the container.
space-evenly
There is equal space between the items and at both the ends.
Try setting the flex-direction
as row-reverse to the
container and see what happens.
Here's what this property
does when the flex direction
is set to column:
Note that justify-content
takes effect only when the
items do not occupy all the
available space on the
container. That's why we
have set a min-height
for the container. Otherwise,
for column direction,
the container height is the
same as that of the items,
and
you won't see this property
making any difference.
Also, try changing the direction
to column-reverse
and
see what happens.