# align-self

> Sets `align-self`.

```ts
import { self } from "@sdxc/u/layout";
```

Sets `align-self`.

## 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`:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.self("center"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.self("center"))
```

## Signature

```ts
u.self(value?: AlignSelfValue)
```