[ @sdxc/u/layout ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

sdxc

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

Pro planEverything in Free, plus SSO.

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

u.hover(u.spacer())

Responsive design

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

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

Signature

u.spacer()