# flex

> A flexible spacer: grows and shrinks to fill whatever room is left in a flex container, pushing siblings on either side of it apart — a toolbar's trailing action pinned to the end, or two row groups split to the edges.

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

A flexible spacer: grows and shrinks to fill whatever room is left in a
flex container, pushing siblings on either side of it apart — a toolbar's
trailing action pinned to the end, or two row groups split to the edges.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.spacer()` | `css({ flex: "1 1 auto" })` |

## Examples

### Basic example

Use `spacer()` on an empty element to fill the room left in a flex row, pushing what follows it to the end:

```tsx
<div mix={[hstack({ gap: 2, align: "center" }), ...]}>
	<span mix={[weight("semibold")]}>sdxc</span>
	<div mix={[spacer()]} />
	<button type="button" mix={[...]}>
		Sign in
	</button>
	<button type="button" mix={[...]}>
		Sign up
	</button>
</div>
```

### In a column

In a column, `spacer()` fills the leftover height, holding a card's action to its bottom edge:

```tsx
<div mix={[vstack({ gap: 2, align: "start" }), is(64), bs(48), ...]}>
	<span mix={[weight("semibold")]}>Pro plan</span>
	<span mix={[...]}>Everything in Free, plus SSO.</span>
	<div mix={[spacer()]} />
	<button type="button" mix={[...]}>
		Upgrade
	</button>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.spacer())
```

## Responsive design

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

```ts
u.at("md", u.spacer())
```

## Signature

```ts
u.spacer()
```