Open In App

CSS justify-content Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.
  • inherit: The items are placed according to their inherited parent element value.
  • flex-end: It is used to align flex items at the end of the container.
  • center: It aligns flex items at the center of the container.
  • space-between: The flex items are placed with even spacing where the item is pushed to the start and the last item is pushed to the end.
  • space-around: The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.
  • space-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.

Syntax:

justify-content: flex-start;

Example: This example illustrates the justify-content property where the 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:

Example: This example illustrates the justify-content property where the 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: 

Example: This example illustrates the justify-content property where the 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:

Example: This example illustrates the justify-content property where the 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:

Example: This example illustrates the justify-content property where the 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:

Example: This example illustrates the justify-content property where the 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 the 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:

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads