CSS justify-content

The CSS justify-content property is used to align content on main or horizontal axis in flex container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

Note - To align content/items vertically, use either align-content or align-items property.

Note - The align-content aligns content (whole) wise, whereas align-items aligns item wise.

CSS justify-content Syntax

The syntax of justify-content property in CSS, is:

justify-content: x;

The value of x should be any of the following:

center - used to place the content to the center of the flex container
flex-start - used to place the content to the start of the flex container. This is the default value
flex-end - used to place the content to the end of the flex container
space-between - used to put equal spaces between all the items in flex container
space-around - used to put equal spaces between all the items with half space before and after the content
space-evenly - used to put equal spaces before and after all the items in the flex container
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS justify-content: center Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>
         <h2>The justify-content Property</h2>
         <p>The justify-content: center; Example</p>
      </div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

The justify-content Property

The justify-content: center; Example

CSS justify-content: flex-start Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: flex-start;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS justify-content: flex-end Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: flex-end;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS justify-content: space-between Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: space-between;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS justify-content: space-around Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: space-around;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS justify-content: space-evenly Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown; justify-content: space-evenly;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »