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 */
}

Two objects

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

Three objects

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

Documentation / Reference

• Specification
• Demo adapted from the Mozilla Sample