Justify elements within a flexbox
Use this property to justify the elements of a flexbox container when there is extra space available.
This property is used to specify one aspect of an element that serves as a flexbox container.
When a container has extra unused space, this property will determine how that space should be divied up.
The algorithm is only needed, on containers with
flex-direction:column, when the total space occupied by each row of elements is less than the width of the container. And for containers with
flex-direction:row this algorithm is only needed when the total space occupied by each column of elements is less than the height of the container. Because the algorithm operates on extra space, it will have no effect when any of the container's elements has a
flex-grow value that is greater than 0.
Use one of these keywords to place all of the elements adjacent to each other, with the extra space to the left [top] or right [bottom]:
|flex-start||The items are all shifted to the starting edge of the container|
|flex-end||The items are all shifted to the ending edge of the container|
|center||The items are all positioned together in the middle of the container|
Or use one of these keywords to distribute the extra space between the elements:
|space-between||The items are evenly distributed within the container, with equal spacing between each, with the first item flush left [top] and the last item flush right [bottom]|
|space-around||The items are evenly distributed within the container, with equal spacing between each, with a half-sized space before the first item and after the last item|
|space-evenly||The items are evenly distributed within the container, with equal spacing between each, with a full-sized space before the first item and after the last item|
|stretch||Stretch each item equally to fill the entire container, but respecting each element's |
|normal||Same as |
And use either of these additional keywords, together with any of the above, to specify what happens if the elements aren't able to fully fit within the container:
|safe||If the chosen keyword from above would cause an element to overflow or lose data, use the |
|unsafe||If the chosen keyword from above would cause an element to overflow or lose data, stick with the rule anyway|