CSS justify-content property

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

Note: This property cannot be used to describe items or containers along the vertical axis. In order to vertically align items we can use After applying lengths and auto margins properties, alignment is possible, i.e. if there is at least one flex element in Flexbox layout with flex-grow property instead of 0, then it will not affect And there won’t be any free space if there is any impact.

Syntax:

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

Attribute value:

flex-start: It is the default value for aligning flex items starting from the container.

Syntax:

justify-content: flex-start;

Example:This example illustrates the justify-content property where the property value is set to flex-start to align items from the beginning 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: A flex item used to align the end of a container.

Syntax:

justify-content: flex-end;

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:

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

    Syntax:

    justify-content: center;

    Example: This example illustrates the justify-content attribute where the attribute 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: Flex items are placed evenly spaced where items are pushed to the beginning and where the last item is pushed to the end.

Syntax:

justify-content: space-between;

Example:This example illustrates the justify-content attribute where the attribute 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: Flex items are placed at equal intervals, i.e. before, between and after each other and corners.

Syntax:

justify-content: space-around;

Example: This example illustrates the justify-content attribute where the attribute 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: Items are positioned equally spaced, but not at the same distance from the corners.

    Syntax:

    justify-content: space-evenly;

    Example:This example illustrates the justify-content attribute where the attribute 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:Places the item based on its default value.

    Syntax:

    justify-content: initial;

    Example: This example illustrates the justify-content attribute where the attribute 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: Places an item based on the value of its inherited parent element.

    Syntax:

    justify-content: inherit;

    Example: This example illustrates the justify-content attribute where the attribute 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 CSS justify-content property supports the following browsers:

  • Google Chrome 29.0, 21.0 -webkit-
  • Internet Explorer 11.0
  • Microsoft Edge 12.0
  • Firefox 28.0, 18.0 -moz-
  • Opera 17.0
  • Safari 9.0, 6.1 -webkit-