Flexbox 與 Grid

自身位置place-self

Setting align-self and justify-self at the same time.

Class	Declarations
`place-self:auto`	`place-self: auto;`
`place-self:normal`	`place-self: normal;`
`place-self:baseline`	`place-self: baseline;`
`place-self:center`	`place-self: center;`
`place-self:stretch`	`place-self: stretch;`
`place-self:start`	`place-self: start;`
`place-self:end`	`place-self: end;`
`place-self:flex-start`	`place-self: flex-start;`
`place-self:flex-end`	`place-self: flex-end;`
`place-self:self-start`	`place-self: self-start;`
`place-self:self-end`	`place-self: self-end;`
`place-self:<align-self>\|<justify-self>`	`place-self: <align-self> <justify-self>;`

Examples

Use place-self:* as shorthand for align-self and justify-self.

<div class="grid h:48x">    <button class="place-self:end">Save</button></div>

Generated CSS

@layer utilities {    .grid {        display: grid    }    .place-self\:end {        place-self: end    }    .h\:48x {        height: 12rem    }}

Use place-self:center when one grid item should sit in the middle of its grid area.

<div class="place-self:center">...</div>

Use place-items when every child should share the same two-axis alignment.

Apply styles based on different states using selectors and conditional queries.

<div class="place-self:auto place-self:center@sm place-self:auto@print">...</div>

The effect depends on the parent layout mode and available space in the item area.

Setting align-items and justify-items at the same time.

Setting the gutters between rows and columns.