What does justify-content do in Flexbox and what are its main values?

Question

Accepted Answer

justify-content distributes the flex items along the main axis — packing them to one end, centering them, or spreading the spare space between them.
Remember that the main axis is whichever direction items flow (horizontal for a row). justify-content decides where the leftover space goes along that axis:

Value
Effect

flex-start
Items packed at the start of the container

flex-end
Items packed at the end

center
Items grouped in the middle

space-between
Equal gaps between items, none at the outer edges

space-around
Equal space around each item — so edges get a half-gap

#parent {
  display: flex;
  /* Group all items in the horizontal centre */
  justify-content: center;
}

Memory tip: space-between glues the first and last items to the edges; space-around leaves a margin at the edges that is half the gap between items.
Go deeper:

MDN — justify-content — interactive "Try it" panel for each value, including space-evenly.

Value	Effect
`flex-start`	Items packed at the start of the container
`flex-end`	Items packed at the end
`center`	Items grouped in the middle
`space-between`	Equal gaps between items, none at the outer edges
`space-around`	Equal space around each item — so edges get a half-gap