Items are aligned along the 'main-axis', which means:
Horizontal alignment if flex-direction is set to 'row' (default) or 'row-reverse'.
Vertical alignment if flex-direction is set to 'column' or 'column-reverse'.
Value
Description
flex-start
Default. Items are left aligned if flex-direction is set to 'row'. Or top aligned if flex-direction is set to 'column'.
center
Items are centered inside the container
flex-end
Items are right aligned if flex-direction is set to 'row'. Or bottom aligned if flex-direction is is set to 'column'.
space-between
Items are spaced, but flush against the edges of the container.
space-around
Items are spaced, and there is space between the items and the edges of the container.
Justify Content
Items are aligned along the 'main-axis', which means:
Horizontal alignment if flex-direction is set to 'row' (default) or 'row-reverse'.
Vertical alignment if flex-direction is set to 'column' or 'column-reverse'.
Themeover CSS Reference
Online CSS References: Justify Content