CSS justify-content Property

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.

Example

#

A flex container with justify-content set to flex-end.

1
2
3
<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>

Syntax

justify-content: flex-start | flex-end | center | space-between |
                 space-around | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see the different justify-content values.

1
2
3
<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>

Browser support

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

You may also like

Guides