CSS place-content Property - GeeksforGeeks

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
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript