The second property that we can change to a flexbox container is called justify-content.
Thejustify-content property controls how items are distributed throughout the container.
By default, the justify-content property stores the value flex-start.
The values that we can assign to the "justify-content" property are:
- flex-start
- flex-end
- center
- space-between
- space-around
To understand how the items are distributed in the container, we can execute this JavaScript program that dynamically modifies the "justify-content" property, select flex-direction the value "row" and then change the property justify-content:
When the flex-direction property stores the value "row" the main axis is horizontal and the cross axis is vertical:
photo
When we modify the "justify-content" property, the items are distributed with respect to the main axis of the container.
Now let's try to select the "column" value in the "flex-direction" property and let's see what happens with each value that we can assign to "justify-content". The spaces now appear vertically, this is because the main axis and the cross axis have changed:
photo
The justify-content property makes sense when there is space not occupied by items, and the distribution of that space is:
flex-start : the items appear glued to the beginning of the container.
flex-end : appear glued to the end.
center : all are grouped in the center.
space-between : the items are distributed occupying all the available space, with equal spaces between them, but without leaving space at the beginning and at the end.
space-around : the items are distributed occupying all the available space, with equal spaces between them, but leaving space at the beginning and at the end.
