Skip to content
Related Articles

Related Articles

CSS justify-content Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
View Discussion
Improve Article
Save Article

The justify-content property in CSS is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container which is distributed in a browser.

Note: This property cannot be used to describe items or containers along the vertical axis. For aligning the items vertically, we can use the align-items property

The alignment is possible after applying the lengths and auto margins properties, ie., if there is at least one flexible element, with flex-grow property, other than 0, in a Flexbox layout then it will not impact & has any effect as there won’t be any available space.

Syntax:

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

Property Values:

flex-start: It is the default value that is used to align flex items from the start of the container.

Syntax:

justify-content: flex-start;

Example: This example illustrates the justify-content property where property value is set to flex-start to align the item from the start of the container.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: flex-start;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

flex-end: It is used to align flex items at the end of the container.

Syntax:

justify-content: flex-end;

Example: This example illustrates the justify-content property where property value is set to flex-end.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: flex-end;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output: 

center: It aligns flex items at the center of the container.

Syntax:

justify-content: center;

Example: This example illustrates the justify-content property where property value is set to center.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: center;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

space-between: The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.

Syntax:

justify-content: space-between;

Example: This example illustrates the justify-content property where property value is set to space-between.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-between;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

space-around: The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.

Syntax:

justify-content: space-around;

Example: This example illustrates the justify-content property where property value is set to space-around.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-around;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksForGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksForGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksForGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksForGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

space-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.

Syntax:

justify-content: space-evenly;

Example: This example illustrates the justify-content property where property value is set to space-evenly.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-evenly;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

initial: The items are placed according to the default value.

Syntax:

justify-content: initial;

Example: This example illustrates the justify-content property where property value is set to initial.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: initial;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

inherit: The items are placed according to their inherited parent element value.

Syntax:

justify-content: inherit;

Example: This example illustrates the justify-content property where property value is set to inherit.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: inherit;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>2
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>3
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
        <div>4
             
 
 
<p>GeeksforGeeks</p>
 
 
 
        </div>
    </div>
</body>
 
</html>

Output:

Supported Browsers: The browser supported by CSS justify-content property are listed below:

  • Google Chrome 29.0 and above
  • Internet Explorer 11.0 and above
  • Microsoft Edge 12.0 and above
  • Firefox 20.0 and above
  • Opera 12.1 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!