CSS justify-content property is used to align the flex items along the main-axis(horizontally by default) within their flex container.
By default, the flex items are aligned at the starting of the flex container. But using the justify-content property we can align flex items anywhere within the flex container.
In the example below, we have used justify-content:center;. This means that all the flex items will be aligned in the center of the flex container.
Example:
.flex-container{
display: flex;
justify-content: center;
}
The justify-content: flex-start; aligns the flex items at the beginning of the flex container. See the example below:
Example:
.flex-container{
display: flex;
justify-content: flex-start;
}
The justify-content: flex-end; aligns the flex items at the end of the flex container. See the example below:
Example:
.flex-container{
display: flex;
justify-content: flex-end;
}
If we use justify-content: space-between;, the unused(extra) space is distributed in such a manner that the space between any two consecutive flex items is exactly the same. See the example below:
Example:
.flex-container{
display: flex;
justify-content: space-between;
}
When we set the justify-content property to space-around, the flex items position themselves in such a way that the space around each and every flex item is exactly the same. See the example below:
Example:
.flex-container{
display: flex;
justify-content: space-around;
}
When we set the justify-content property to space-evenly, the extra space is distributed in such a way that space before and after each flex item remains exactly the same. Which means that the extra space is evenly distributed. See the example below:
Example:
.flex-container{
display: flex;
justify-content: space-evenly;
}
CSS Syntax
The justify-content property has the following syntax:
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
Property Values
The justify-content property accepts the following values:
| flex-start | The flex items are aligned at the beginning of the flex container. This is the default value. |
| flex-end | The flex items are aligned at the end of the flex container. |
| center | Aligns the flex items in the center of the flex container. |
| space-between | The space between all consecutive flex items is exactly the same. |
| space-around | The space around each flex item is exactly the same. |
| space-evenly | The space before and after each flex item is exactly the same. |
| initial | Sets the justify-content property to its default value(flex-start). |
| inherit | Inherits the justify-content property from the parent element. |
General Info
| Default Value | flex-start |
| Inherited | No |
| JavaScript Usage | element.style.justifyContent = “flex-end” |
