CSS place-items Property

The CSS place-items property is the shorthand of align-items and justify-items property. The shorthand properties mean in CSS, that you can set the multiple properties values in a single property. So here the place-items property can hold the value of the align-items and justify-items property values.   

Syntax:

place-items: align-items property value justify-items property value

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

  • auto: If the items have no parents then this property is used that defines the absolute positioned.
  • normal: This property dependent on the layout mode we are in.
  • start: This property used to align flex items from the start of the container.
  • end: This property 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.
  • self-start: This property will be packed flush to the edge of the alignment container of the start side of the item.
  • self-end: This property will be packed flush to the edge of the alignment container of the end side of the item.
  • space-evenly: This property defines that the positioned with equal spacing between them but the spacing from corners differ.
  • stretch: This property defines that the line stretched to take the remaining space of the flex container. It is the default value.

Below examples illustrate the CSS place-items property:

Example 1: In this example, we will use star place-items: flex-start property value.



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>CSS place-items Property</title>
        <style>
            h1 {
                color: green;
            }
            #container {
                display: flex;
                height: 200px;
                width: 460px;
                flex-wrap: wrap;
                background-color: gray;
                /* place-items can be changed in the live sample */
                place-items: flex-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-items 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>

chevron_right


Output:

Example 2: Here we will use place-items: flex-end property value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
                /* place-items can be changed in the live sample */
                place-items: flex-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-items 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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.