Skip to content
Related Articles

Related Articles

Improve Article

CSS | justify-content Property

  • Last Updated : 09 Aug, 2019

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 arrow_drop_up
Recommended Articles
Page :