Table of contents
1.
Introduction
2.
Syntax  of justify-content in CSS
3.
Understanding Property in Detail 
3.1.
1. Flex-start 
3.2.
HTML
3.3.
2. Flex-end 
3.4.
HTML
3.5.
3. Flex-Center
3.6.
HTML
3.7.
4. Flex-space- inherit 
3.8.
HTML
3.9.
5. Flex-space-evenly
3.10.
HTML
3.11.
6. Flex-space-initial 
3.12.
HTML
3.13.
7. Flex-space-around
3.14.
HTML
3.15.
8. Flex- space-between
3.16.
HTML
4.
When to Use CSS justify-content Property? 
5.
Supported Browsers
6.
Frequently Asked Questions 
6.1.
Can justify-content be used in CSS grid layouts?
6.2.
Which layout model uses justify-content?
6.3.
What is the difference between space-between and space-around?
6.4.
What is the difference between justify content and align items?
7.
Conclusion 
Last Updated: Dec 8, 2024
Easy

CSS Justify-Content Property

Author Sinki Kumari
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The justify-content property of CSS is a sub-property of the flexbox yet a powerful tool that is used to align the elements and distribution of items within the flex container. When building responsive layouts and design, using justify content can improve the web page's appearance and flexibility.

CSS Justify-Content Property

In this blog, we will learn how to use justify-content property and its different pseudo-classes with examples. Understanding each property will help you to create a modern and dynamic web page. 

Justify-content property in CSS is a property of CSS that is used to align the elements when it does not use the complete space on the main axis i.e. (the horizontal axis). It aligns these elements to utilize the flex container's main axis fully. 

This alignment is possible when we apply the length and auto margins properties. That also means when one or more elements in the flexbox have a flex-grow value greater than 0, it will take up all the available space. So when this occurs, the length and auto margins property won’t have any effect as there won’t be any extra space left for margins or fixed lengths to be applied.

This property cannot be used to align elements on the vertical axis. To align elements in this axis, the align-items property is used. 

Syntax  of justify-content in CSS

Let’s look at how to use the justify-content property in CSS. Below is the syntax for using the justify-content property. 

justify-content: start | end | center | space-between | space-around | space-evenly | initial | inherit | left | right 


Property Values

ValueDescription
startThe default value of justify-content. Flex items are aligned at the beginning of the container.
endFlex items are aligned at the end of the container.
centerFlex items are aligned at the center of the container.
space-betweenFlex items are evenly distributed along the main axis, with equal space between them, starting from the container's edges.
space-aroundItems are equally spaced with equal space before, between, and after them. If only one item exists, it is centered.
space-evenlyItems are equally spaced with equal spacing from the edges of the container and between each item.
initialSets the property to its default value.
inheritInherits the property value from the parent element.
leftItems are aligned toward the left edge of the alignment container.
rightItems are aligned toward the right edge of the alignment container.

Understanding Property in Detail 

Now, let's try to understand some of these properties with examples. 

1. Flex-start 

This aligns the items to the start of the container which means positioning it to the left side or top when vertical alignment is used. 

Syntax

justify-content: start; 

Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:start;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

2. Flex-end 

This aligns the items to the end of the container which means positioning it to the right side or bottom when vertical alignment is used. 

Syntax

justify-content: end; 

Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:end;

           background-color: yellow;

           padding: 10px;

       }      

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>

 

Output

Output

3. Flex-Center

Flex items are aligned at the center of the container placing them equally from the left and right side of the container. 

Syntax

justify-content: center; 

Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:center;

           background-color: yellow;

           padding: 10px;

       }

      

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

4. Flex-space- inherit 

This property allows the flex items to inherit the properties from the parent element. 

Syntax 

justify-content: inherit;


Example

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:inherit;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

5. Flex-space-evenly

Flex items are aligned evenly from the start to the end of the container. Items are aligned to have equal space from the container. 

Syntax 

justify-content: space-evenly;

Example

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:space-evenly;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

6. Flex-space-initial 

Flex items are aligned to the default value of the flex property. This is nothing, but the flex start property. 

Syntax 

justify-content: initial;

Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:initial;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

7. Flex-space-around

Flex items are aligned in a way in which there is equal space between them in the container. The space is equal from all the ends which means from the start, middle, and end elements have equal space. 

Syntax 

justify-content: space-around; 


Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:space-around;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

8. Flex- space-between

Flex items are aligned evenly across the center keeping the first item at the start and last item at the end. 

Syntax 

justify-content: space-between; 


Example 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

       .container {

           display: flex;

           justify-content:space-between;

           background-color: yellow;

           padding: 10px;

       }       

       .box {

           width: 40px;

           height: 20px;

           background-color: lightcoral;

           color: white;

           text-align: center;

           line-height: 20px;

           padding: 4px;

           margin: 3px;

       }

   </style>

   <title>Justify Content Example</title>

</head>

<body>

<div class="container">

   <div class="box">C</div>

   <div class="box">O</div>

   <div class="box">D</div>

   <div class="box">I</div>

   <div class="box">N</div>

   <div class="box">G</div>

</div>

</body>

</html>


Output

Output

When to Use CSS justify-content Property? 

Justify-content property should be use when you explicitly want to customize the alignment of the elements. There are various properties of justify-content that can be used to position the alignment according to the requirement. 
1. Center-spacing: When you want to position the elements in the center, use justify-content property as the center and it will position the elements in the center of the container. 
 

2. Equal-spacing: When you want to position the elements so that it has equal space between them, use justify-content property either as space-around, space-evenly, or space-between and it will position the elements in a way that it must have equal space around them. 
 

3. Alignment: When you want to align the elements either to the start or end of the container, use justify-content property as start or end and it will shift the alignment either to the beginning or end of the container. 

Supported Browsers

Below are the mentioned browsers with their versions that support justify-content functionality. 

  1. Google Chrome 29.0 and above 
     
  2. Firefox 20.0 and above 
     
  3. Opera 12.1 and above 
     
  4. Internet Explorer 11.0 and above 
     
  5. Safari 9.0 and above 
     
  6. Microsoft Edge 12.0 and above 

Frequently Asked Questions 

Can justify-content be used in CSS grid layouts?

Yes, justify-content can be used in CSS grid layouts. It is used to align the elements when it does not use the complete space on the main axis i.e. (the horizontal axis). It aligns these elements to utilize the flex container's main axis fully. 

Which layout model uses justify-content?

Justify content is widely used in both models. Flexbox uses justify-content to control the horizontal alignment of items within a flex container and grid layout uses this to align gird items within the grid container. 

What is the difference between space-between and space-around?

Space between and space around differs in terms of spacing they provide in elements. Space-between makes the spaces only between the elements ensuring they have equal space between them whereas space-around makes the spaces around the objects i.e. the start, or the end. 

What is the difference between justify content and align items?

The most significant differentials between justify-content and align items include the axis they align elements on regarding the two alignment possibilities provided by Flexbox or Grid in CSS regarding the container:

Conclusion 

In summary, the justify-content property in CSS plays a vital role in aligning and distributing items within a flex container. Mastering its various values and applications enables developers to create visually appealing, responsive web layouts. Explore more CSS techniques and tips on Code360 to elevate your web design skills!

Live masterclass