CSS place-content Property

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

CSS place-content Property

Explore