CSS Flex - justify-content property

About

justify-content will distribute the object along the main axis of a flex container (ie horizontal or vertical)

Illustration

An illustration of the five first justify-content keywords (from the css flexbox 1 specification) and their effects on a flex container with three colored items.

Value

From the css flexbox 1

content position: flex-start , flex-end, center
content-distribution: space-between, space-around

Added on Css align 3

content-distribution: space-evenly, stretch
content position: center, start, end

content-distribution values illustration:

Live Demo

One box

#container {
  display: flex;
  justify-content: space-between; /* Can be changed below */
}

Rendered by WebCode

Two objects

#container {
  display: flex;
  justify-content: space-between; /* Can be changed below */
}

Rendered by WebCode

Three objects

#container {
  display: flex;
  justify-content: space-between; /* Can be changed below */
}

Rendered by WebCode

Documentation / Reference

Specification
Demo adapted from the Mozilla Sample