Open In App

CSS place-content Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • Google Chrome 59
  • Edge 79
  • Firefox 45
  • Opera 46
  • Safari 9


Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads