What does justify-content CSS property do and what values can it have?

The CSS property justify-content defines how the flex items within a flex container will be justified.

The justification is always done on the main axis. So for the horizontal orientation of a flex container the flex-start will justify items to left, flex-end will justify items to right.

• flex-start - justifies the content to left for horizontal orientation or to top for vertical orientation
• flex-end - justifies the content to right for horizontal orientation or to bottom for vertical orientation
• center - justifies the content to center
• space-between - when there are multiple flex items in a flex container, they will be justified evenly, however, the first and last item won't have space on their outer edges
• space-around - when there are multiple flex items in a flex container, they will be justified evenly.

CSS

div {
  display: flex;
  justify-content: flex-start;
}