[ @sdxc/u/layout ]
align-self
Sets align-self.
import { self } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.self("center") | css({ alignSelf: "center" }) |
Examples
Basic example
Use self("center") to align one item along the center of the cross axis, whatever its container's items:
01
self("center")
03
<div mix={[flex(), gap(4), items("stretch"), is(80), bs(36), ...]}>
<div mix={[...]}>01</div>
<div mix={[self("center"), ...]}>self("center")</div>
<div mix={[...]}>03</div>
</div>Start and end
Use self("start") or self("end") to align one item to the start or the end of the cross axis:
self("start")
02
self("end")
<div mix={[flex(), gap(4), items("stretch"), is(96), bs(36), ...]}>
<div mix={[self("start"), ...]}>self("start")</div>
<div mix={[...]}>02</div>
<div mix={[self("end"), ...]}>self("end")</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.self("center"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.self("center"))Signature
u.self(value?: AlignSelfValue)