Skip to content
Related Articles

Related Articles

Improve Article

CSS | justify-content Property

  • Last Updated : 26 Aug, 2021
Geek Week

The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser. 
Note: This property cannot be used to describe items or containers along the vertical axis.
 

Syntax:  

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

Default Value:

  • flex-Start
     

Property Values: 
 

  • flex-start: It is used to align flex items from the start of the container.
     

Syntax: 
 



justify-content: flex-start;

Example: 
 

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: 
 

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 align flex items at the center of container.
     

Syntax: 
 



justify-content: center;

Example: 
 

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 last item is pushed to end.
     

Syntax: 
 

justify-content: space-between;

Example: 
 

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 from each others, the corners.
     

Syntax: 
 

justify-content: space-around;

Example: 
 

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 differ.
     

Syntax: 
 

justify-content: space-evenly;

Example: 
 

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: 
 

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 its inherited parent element value.
     

Syntax: 
 

justify-content: inherit;

Example: 
 

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, 21.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 28.0, 18.0 -moz-
  • Opera 17.0
  • Safari 9.0, 6.1 -webkit-

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :