CSS | justify-content Property

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;

Property Values:

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

Syntax:

justify-content: flex-start;

Example:

<!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:

<!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:

<!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:

<!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:

<!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:

<!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:

<!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:

<!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

Recommended Posts: