Flex

A semantic alternative to CSS flex layout, with a responsive and token-aware API.

When to use

Use Flex for one-dimensional alignment, distribution, wrapping, and consistent gaps.

The basic usage.

Set align.

Set the gap between elements, which has three preset sizes: small, medium, and large. You can also customize the gap size.

Auto wrap line.

Nesting can achieve more complex layouts.

Flex and FlexProps are exported from @ceebee/ui/client.

Property	Description	Type	Default	Version
`vertical`	Is direction of the flex vertical, use flex-direction: column	`boolean`	`false`	5.10.0
`wrap`	Set whether the element is displayed in a single line or in multiple lines	`flex-wrap \| boolean`	`nowrap`	boolean: 5.17.0
`justify`	Sets the alignment of elements in the direction of the main axis	`justify-content`	`normal`	—
`align`	Sets the alignment of elements in the direction of the cross axis	`align-items`	`normal`	—
`flex`	flex CSS shorthand properties	`flex`	`normal`	—
`gap`	Sets the gap between grids	`small \| medium \| large \| string \| number`	`-`	—
`component`	custom element type	`React.ComponentType`	`div`	—
`orientation`	direction of the flex	`horizontal \| vertical`	`horizontal`	-

Ceebee's token-constrained server-safe Flex remains at @ceebee/ui; use @ceebee/ui/client for this complete API.