About
justify-content will distribute the object along the main axis of a flex container (ie horizontal or vertical)
Articles Related
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
- Demo adapted from the Mozilla Sample