CSS place-self Property

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

Syntax:

place-self: align-self-property-value justify-self-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: This property is used if the items have no parent. This property is then used to define the absolute position of the items.
normal: This property depends on the current layout mode.
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 is used to display the lines at the start of the flex container.
flex-end: This property is used to display the flex lines at the end of the flex container.
center: This property is used to align flex items to the center of the container.
self-start: This property is used to pack items flush to the alignment container with the start side of the item.
self-end: This property is used to pack items flush to the alignment container with the end side of the item.
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-self property: Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS place-self Property</title>
    <style>
        h1 {
            color: green;
        }

        article {
            background-color: black;
            display: grid;
            grid-auto-rows: 40px;
            grid-gap: 5px;
            width: 200px;
        }

        /* Using different values
    with the place-self property */
        span:nth-child(2) {
            place-self: start center;
        }

        span:nth-child(3) {
            place-self: center start;
        }

        article span {
            background-color: orange;
            color: white;
            margin: 1px;
            text-align: center;
        }

        article,
        span {
            padding: 6px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>CSS place-self Property</b>
        <article class="container">
            <span>HTML</span>
            <span>CSS</span>
            <span>Bootstrap</span>
            <span>JavaScript</span>
        </article>
    </center>
</body>

</html>

Output: place-self-ex1

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS place-self Property</title>
    <style>
        h1 {
            color: green;
        }

        article {
            background-color: black;
            display: grid;
            grid-auto-rows: 40px;
            grid-gap: 5px;
            width: 200px;
        }

        /* Using different values
        with the place-self property */
        span:nth-child(2) {
            place-self: self-start;
        }

        span:nth-child(3) {
            place-self: self-end;
        }

        article span {
            background-color: orange;
            color: white;
            margin: 1px;
            text-align: center;
        }

        article,
        span {
            padding: 6px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>CSS place-self Property</b>
        <article class="container">
            <span>HTML</span>
            <span>CSS</span>
            <span>Bootstrap</span>
            <span>JavaScript</span>
        </article>
    </center>
</body>

</html>

Output: place-self-ex2

Explore