Flexbox 與 Grid
自身對齊align-self
Controlling how an individual item is aligned along its cross axis.
Overview
| Class | Declarations |
|---|---|
self-auto | align-self: auto;
|
self-normal | align-self: normal;
|
self-baseline | align-self: baseline;
|
self-center | align-self: center;
|
self-stretch | align-self: stretch;
|
self-start | align-self: start;
|
self-end | align-self: end;
|
self-flex-start | align-self: flex-start;
|
self-flex-end | align-self: flex-end;
|
self-self-start | align-self: self-start;
|
self-self-end | align-self: self-end;
|
self-anchor-center | align-self: anchor-center;
|
align-self:<value> | align-self: <value>;
|
Examples
Override cross-axis alignment for one item
Use self-* utilities when a single flex or grid item needs different cross-axis alignment than its siblings.
<div class="flex items-start gap:md"> <img class="size:10x self-center" src="..." alt="" /> <p class="m:0">Text that controls the row height.</p></div>Generated CSS
@layer utilities { .flex { display: flex } .items-start { align-items: start } .self-center { align-self: center }}Stretch a single item
Use self-stretch when one child should fill the cross size even if the group alignment is different.
<button class="self-stretch">...</button>Use align-items when all items should share the same alignment.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="self-auto self-center@sm self-auto@print">...</div>The effect depends on the parent layout mode and axis.