Justify elements within a flexbox

justify-content

Use this property to justify the elements of a flexbox container when there is extra space available.

Property values

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 max-width [max-height] property
normal Same as stretch

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 start rule
unsafe If the chosen keyword from above would cause an element to overflow or lose data, stick with the rule anyway

Examples

display: flex;
justify-content: space-evenly;
justify-content
0

style > flexbox > justify-contentJustify elements within a flexbox

🔗 🔎