The justify-content property aligns items in a flex container.
This property only has effect when space is available.
The grid layout system can also use this property.
A flex container with justify-content set to flex-end.
<style>
.justify {
background-color: steelblue;
display: flex;
justify-content: flex-end;
}
.justify > div {
background-color: aliceblue;
width: 75px;
margin: 10px;
text-align: center;
line-height: 70px;
font-size: 22px;
}
</style>
<div class="justify">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: flex-start | flex-end | center | space-between |
space-around | initial | inherit;
| Value | Description |
|---|---|
| flex-start | Default. Items align at the beginning of the container. |
| flex-end | Items align at the end of the container. |
| center | Items align at the center of the container. |
| space-between | Items align with maximum space between them. |
| space-around | Items align with equal space before and after each item. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different justify-content values.
<style>
.flex-container-example {
background-color: steelblue;
display: flex;
justify-content: space-around;
}
.flex-container-example > div {
background-color: aliceblue;
width: 75px;
margin: 10px;
text-align: center;
line-height: 70px;
font-size: 22px;
}
</style>
<div class="flex-container-example">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
This table shows when justify-content support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
