[ @sdxc/u/layout ]

flex-basis

Applies flex-basis, defaulting to "auto" to match the property's own initial value — the remainder of a flex: N N M shorthand once u.grow()/u.shrink() have been extracted from it.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.basis()`	`css({ flexBasis: "auto" })`
`u.basis("0%")`	`css({ flexBasis: "0%" })`
`u.basis(4)`	`css({ flexBasis: "calc(var(--ui-spacing, 0.25rem) * 4)" })`

Examples

Basic example

Use basis(n) with a step of the spacing scale, like basis(32) or basis(64), to set the size a flex item starts from:

basis(32)

basis(64)

<div mix={[flex(), gap(4)]}>
	<div mix={[basis(32), ...]}>basis(32)</div>
	<div mix={[basis(32), ...]}>basis(32)</div>
	<div mix={[basis(64), ...]}>basis(64)</div>
</div>

Using a percentage

Pass a percentage like basis("25%") to size an item as a share of its container:

25%

basis("50%")

<div mix={[flex(), gap(4)]}>
	<div mix={[basis("25%"), ...]}>25%</div>
	<div mix={[basis("25%"), ...]}>25%</div>
	<div mix={[basis("50%"), ...]}>basis("50%")</div>
</div>

Starting from zero

With basis() items grow from their content size; with basis("0%") they grow from nothing, so grow() splits the row into equal parts:

basis()

a long label

short

basis("0%")

a long label

short

<div mix={[...]}>
	<div mix={[flex(), gap(4)]}>
		<div mix={[grow(), basis(), ...]}>basis()</div>
		<div mix={[grow(), basis(), ...]}>a long label</div>
		<div mix={[grow(), basis(), ...]}>short</div>
	</div>
	<div mix={[flex(), gap(4)]}>
		<div mix={[grow(), basis("0%"), ...]}>basis("0%")</div>
		<div mix={[grow(), basis("0%"), ...]}>a long label</div>
		<div mix={[grow(), basis("0%"), ...]}>short</div>
	</div>
</div>

Applying on a state

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

u.hover(u.basis())

Responsive design

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

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

Customizing your theme

Customizing spacing

Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:

:root {
	--ui-spacing: 0.25rem;
}

Every call that names the step now reads the new value:

basis(4)

Signature

u.basis(value?: SizeValue)