自身對齊方式justify-self

Controlling how an individual item is aligned along its inline axis.

Overview

Examples

Align one grid item inline

Use justify-self:* to override inline-axis alignment for a single grid item.

<div class="grid">    <button class="justify-self:end">Save</button></div>

@layer utilities {    .grid {        display: grid    }    .justify-self\:end {        justify-self: end    }}

Center an item inside its area

Use justify-self:center when the grid area is wider than the item.

<img class="justify-self:center" src="..." alt="" />

Use justify-items when every child should share the same inline alignment.

Apply conditionally

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

<div class="justify-self:stretch justify-self:end@sm justify-self:stretch@print">...</div>

For cross-axis item overrides, use align-self.