Table of contents

Introduction

Syntax of justify-content in CSS

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

When to Use CSS justify-content Property?

Supported Browsers

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?

Conclusion

Last Updated: Dec 8, 2024

Easy

CSS Justify-Content Property

Q: 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.

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

Space between and space around differs in terms of the 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.

Author Sinki Kumari

Do you think IIT Guwahati certified course can help you in your career?

Yes

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.

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

Value	Description
start	The default value of justify-content. Flex items are aligned at the beginning of the container.
end	Flex items are aligned at the end of the container.
center	Flex items are aligned at the center of the container.
space-between	Flex items are evenly distributed along the main axis, with equal space between them, starting from the container's edges.
space-around	Items are equally spaced with equal space before, between, and after them. If only one item exists, it is centered.
space-evenly	Items are equally spaced with equal spacing from the edges of the container and between each item.
initial	Sets the property to its default value.
inherit	Inherits the property value from the parent element.
left	Items are aligned toward the left edge of the alignment container.
right	Items 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

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

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

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

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

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

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

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

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.

Google Chrome 29.0 and above
Firefox 20.0 and above
Opera 12.1 and above
Internet Explorer 11.0 and above
Safari 9.0 and above
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

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

432+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

307+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

432+ registered

View more events