CSS - justify-content Property

Previous
Quiz
Next

CSS justify-content property determines the alignment and allocation of space between content items along the main axis of a flex container or the inline axis of a grid container. In the case of flex container, the direction of main axis is determined by flex-direction and the direction perpendicular to main-axis is the cross-axis.

Syntax

Positional Alignment

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

Property Values

Value Description
flex-start The items are positioned at the start of the container. Default.
flex-end The items are positioned at the end of the container.
center The items are positioned at the center of the container.
space-between The items in the container have space between them.
space-around The items in the container have space before, between and after them.
space-evenly The items in the container have equal space around them.
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS Justify Content Property

The following examples explain the justify-content property with different values.

Justify Content Property with Flex Start Value

To position the items at the start of a flex container along the main-axis, we use the flex-start value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-start;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-start; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Flex End Value

To position the items at the end of a flex container along the main-axis, we use the flex-end value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-end; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Center Value

To position the items at the center of a flex container along the main-axis, we use the center value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Space Between Value

To position the items in a flex container along the main-axis such that they have space betweent them, we use the space-between value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-between; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Space Around Value

To position the items in a flex container along the main-axis such that they have space before, after and between them, we use the space-around value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-around;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-around; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Space Evenly Value

To position the items in a flex container along the main-axis such that they have equal distribution of space around them, we use the space-evenly value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-evenly; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Justify Content Property with Grid Layout

The justify-content property can also be used with the grid layout to align items in the inline direction. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 300px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 30px;
         width: 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:grid
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
justify-content 29.0 11.0 28.0 9.0 17.0
css_properties_reference.htm
Print Page
Previous
Next
Advertisements