Distribution

You've seen how the children of a flex parent are by default jammed together at the start of the element. To change how the children are distributed along the main axis, you use the justify-content property. Here the default distribution is made explicit using the value flex-start:

html
css
preview

Try setting justify-content to these other possible values:

All of these values keep the children in a clump. You also have the option to spread them out along the main axis. Try setting justify-content to these spacing values:

Do you see the difference between these? Suppose there are N children in the flex parent. Any extra space in the flex parent will be divided up and distributed according to which spacing value you use:

This same logic can be extended to the three earlier values:

You could say that justify-content lets you choose between six different schemes for arranging any extra space. Under this definition, the value of justify-content has no bearing on the rendering if there is no extra space. You can test this by switching to a vertical layout, which causes the parent to snugly fit around its children:

html
css
preview

Try changing justify-content to its different values.

Suppose you have a flex parent with a vertical orientation, and you do want it to have extra space. You'll have to make sure its height is set accordingly. Here the parent is made to fill the viewport:

html
css
preview

Notice how the content overflows off the bottom of the Preview panel? The flex parent is sized to match the viewport, but the body also has margin, which makes the content exceed the available space. Try fixing this by removing the margin from the body.

But what happens if the children do overflow the parent? Try filling up the flex parent with extra children and see what happens under various values of justify-content.

You should see that justify-content isn't just about where to put the spacing, as it impacts where elements are placed even when there is no extra space.