place-self

Description
Syntax
Examples
Links

Description

The place-self property for CSS is shorthand for align-self and justify-self.

Syntax

CSS

place-self: value;

JS

object.style.placeSelf = "value";

Values

<'place-self'> = <'align-self'> <'justify-self'>?

<'align-self'> = auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>

auto

Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).

normal

Represents the default alignment for the content.

stretch

If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

<baseline-position> = [ first | last ]? baseline

first baseline

Specifies participation in first-baseline alignment: aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group.

last baseline

Specifies participation in last-baseline alignment: aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group.

baseline

Computes to first baseline.

<overflow-position> = unsafe | safe

unsafe

Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.

safe

If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.

<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

center

Centers the alignment subject within its alignment container.

start

Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.

end

Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.

self-start

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's start side in the appropriate axis.

self-end

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's end side in the appropriate axis.

flex-start

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.

flex-end

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.

<'justify-self'> = auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]

auto

Automatically specified by the user agent.

normal

Represents the default alignment for the layout mode.

stretch

<baseline-position> = [ first | last ]? baseline

first baseline

Specifies participation in first-baseline alignment: aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group.

last baseline

Specifies participation in last-baseline alignment: aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group.

baseline

Computes to first baseline.

<overflow-position> = unsafe | safe

unsafe

Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.

safe

If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.

<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

center

Centers the alignment subject within its alignment container.

start

Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.

end

Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.

self-start

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's start side in the appropriate axis.

self-end

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's end side in the appropriate axis.

flex-start

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.

flex-end

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.

left

Aligns the alignment subject to be flush with the alignment container's line-left or physical left edge, whichever is in the appropriate axis.

right

Aligns the alignment subject to be flush with the alignment container's line-right or physical right edge, whichever is in the appropriate axis.

Initial

auto

Examples

1 · auto

2 · normal

3 · stretch

4 · baseline-position · first baseline

5 · baseline-position · last baseline

6 · baseline-position · baseline

7 · overflow-position · unsafe

8 · overflow-position · safe

9 · self-position · center

10 · self-position · start

11 · self-position · end

12 · self-position · self-start

13 · self-position · self-end

14 · self-position · flex-start

15 · self-position · flex-end

16 · left

17 · right

18 · JS

<!doctype html>
<html>
<head>
    <style>
        body
        {
            height: 100vh;
        }
        .myclass
        {
            display: grid;
            grid-auto-rows: 100px;
            grid-template-columns: repeat(3, 100px);
            height: 100%;
            place-content: center;
            place-items: center;
            width: 100%;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
        }
        .myclass > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button>auto</button>
    <button>normal</button>
    <button>stretch</button><br>
    <button>first baseline</button>
    <button>last baseline</button>
    <button>baseline</button><br>
    <button value="unsafe center">unsafe</button>
    <button value="safe center">safe</button><br>
    <button>center</button>
    <button>start</button>
    <button>end</button>
    <button>self-start</button>
    <button>self-end</button>
    <button>flex-start</button>
    <button>flex-end</button><br>
    <button value="normal left">left</button>
    <button value="normal right">right</button>
    <div class="myclass">
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
        <div>place-self</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(".myclass").style;
            mystyle.gridAutoRows = "100px";
            mystyle.gridTemplateColumns = "repeat(3, 100px)";
            if(myproperty.includes("safe"))
            {
                mystyle.gridAutoRows = "0";
                mystyle.gridTemplateColumns = "repeat(3, 0)";
            }
            document.querySelector(".myclass > div").style.placeSelf = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>