Skip to content
Related Articles

Related Articles

CSS place-content Property
  • Last Updated : 31 Jul, 2020

The CSS place-content property is the shorthand of align-content and justify-content property. The shorthand properties in CSS means that you can set the multiple properties values in a single property. Here the place-content property can hold the value of the align-content and justify-content property values.   

Syntax:

place-content: align-content-property-value justify-content-property-value

Property Values: This property accepts all the possible combination values that can make by the align-content and justify-content property values.

  • start: This property is used to align flex items from the start of the container.
  • end: This property is used to align flex items from the end of the container.
  • flex-start: This property displays the lines at the start of the flex container.
  • flex-end: This property displays the flex lines at the end of the flex container.
  • center: This property aligns flex items at the center of the container.
  • space-around: This property distribute space equally around the flex lines.
  • space-between: This property distribute flex lines space with equal space between them.
  • space-evenly: This property defines the position with equal spacing between them but the spacing from corners differs.
  • stretch: This property defines the line stretched to take the remaining space of the flex container. It is the default value.

Below examples illustrate the CSS place-content property:

Example 1: In this example, we will use the following place-content property values: flex-start center.



HTML




<!DOCTYPE html>
<html>
    <head>
        <title>CSS place-content Property</title>
        <style>
            h1 {
                color: green;
            }
            #container {
                display: flex;
                height: 200px;
                width: 460px;
                flex-wrap: wrap;
                background-color: gray;
                /* Setting property values */
                place-content: flex-start center;
            }
  
            div > div {
                border: 2px solid black;
                width: 60px;
                background-color: green;
                color: white;
            }
  
            .short {
                font-size: 12px;
                height: 30px;
            }
  
            .tall {
                font-size: 14px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>CSS place-content Property</b>
            <div id="container">
                <div class="short">Geeks</div>
                <div class="short">
                    Computer<br />
                    Science
                </div>
                <div class="tall">
                    Geeks<br />
                    for
                </div>
                <div class="tall">
                    Portal<br />
                    for
                </div>
                <div class="tall"></div>
            </div>
        </center>
    </body>
</html>

Output: 

Example 2: Here we will use place-content: flex-start start property value.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>CSS place-content Property</title>
        <style>
            h1 {
                color: green;
            }
            #container {
                display: flex;
                height: 100px;
                width: 460px;
                flex-wrap: wrap;
                background-color: gray;
  
                /* place-content can be changed
                   in the live sample */
                place-content: flex-start start;
            }
  
            div > div {
                border: 2px solid black;
                width: 60px;
                background-color: green;
                color: white;
            }
  
            .short {
                font-size: 12px;
                height: 30px;
            }
  
            .tall {
                font-size: 14px;
                height: 40px;
            }
        </style>
    </head>
  
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>CSS place-content Property</b>
            <div id="container">
                <div class="short">Geeks</div>
                <div class="short">
                    Computer<br />
                    Science
                </div>
                <div class="tall">
                    Geeks<br />
                    for
                </div>
                <div class="tall">
                    Portal<br />
                    for
                </div>
                <div class="tall"></div>
            </div>
        </center>
    </body>
</html>

Output:

Example 3: Here we will use the place-content: flex-end end property value.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>CSS place-content Property</title>
        <style>
            h1 {
                color: green;
            }
            #container {
                display: flex;
                height: 100px;
                width: 460px;
                flex-wrap: wrap;
                background-color: gray;
  
                /* place-content can be 
                  changed in the live sample */
                place-content: flex-end end;
            }
  
            div > div {
                border: 2px solid black;
                width: 60px;
                background-color: green;
                color: white;
            }
  
            .short {
                font-size: 12px;
                height: 30px;
            }
  
            .tall {
                font-size: 14px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>CSS place-content Property</b>
            <div id="container">
                <div class="short">Geeks</div>
                <div class="short">
                    Computer<br />
                    Science
                </div>
                <div class="tall">
                    Geeks<br />
                    for
                </div>
                <div class="tall">
                    Portal<br />
                    for
                </div>
                <div class="tall"></div>
            </div>
        </center>
    </body>
</html>

Output:

Supported Browsers:

  • Firefox (best support)
  • Chrome
  • Safari
  • Opera
  • Edge

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :