CSS justify-content Property

The justify-content property aligns the items when the items do not use all available space horizontally. It is a sub-property of the Flexible Box Layout module. It controls over the alignment of items when they overflow the line.

The justify-content property should be used with the display property set to "flex". For aligning the items vertically use the align-items property.

Initial Value flex-start
Applies to Flex containers.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.justifyContent = "center";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style> 
      .center {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      .center div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: center" is set:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Example with "flex-start" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style> 
      .start {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-start; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-start;
      }
      .start div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-start" is set:</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Another example with "flex-end" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style> 
      .end {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-end; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-end;
      }
      .end div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-end" is set:</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Example where justify-content is specified by "space-between" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style> 
      .space-between {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-between; /* Safari 6.1+ */
      display: flex;
      justify-content: space-between;
      }
      .space-between div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-between" is set:</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Here is an example with "space-around" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style> 
      .space-around {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-around; /* Safari 6.1+ */
      display: flex;
      justify-content: space-around;
      }
      .space-around div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-around" is used:</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Values

Value Description
flex-start The items start from the beginning of the container.
flex-end The items are placed at the end of the container.
center The items are placed at the center of the container.
space-around There is space before, between and after the lines of the items.
space-between There is space between the lines of the items.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

29.0+
21-28 -webkit-
10.0+ -ms- 12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Practice Your Knowledge

The justify-content property has the following values, except




Related articles