Table of Contents

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.

flex-start flex-end center space-between space-around

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:

space-betweenspace-aroundspace-evenlystretch

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