Flex

Flexbox container with token-driven direction, alignment, justification, wrapping, and gap. Layout props (direction, justify, align, wrap, gap) accept a single value or a per-breakpoint responsive object like { base: "column", md: "row" }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport.

Logo

Account

Usage

import { Flex, FlexProps } from "@desk/ui/components/flex";

Best practices

Flex exposes full flexbox (direction/justify/align/wrap) and defaults to a row; for a simple gapped column reach for Stack, for a wrapping cluster Group.
Every layout prop takes a responsive object like { base: "column", md: "row" }; set responsiveMode="container" to resolve breakpoints against the nearest container.

Props

Prop	Type	Default	Description
align	`ResponsiveValue<FlexAlign>`	`"stretch"`	Cross-axis alignment. Accepts a per-breakpoint responsive object.
as	`"div" \| "li" \| "nav" \| "ol" \| "span" \| "ul" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "main" \| "section"`		Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's (HTMLDivElement).
direction	`ResponsiveValue<FlexDirection>`	`"row"`	Main-axis direction. Accepts a per-breakpoint responsive object.
gap	`ResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`		Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.
guidelines	`boolean`	`false`	Show dashed outline guidelines during development.
inline	`boolean`	`false`	Render as inline-flex instead of flex.
justify	`ResponsiveValue<FlexJustify>`	`"flex-start"`	Main-axis distribution. Accepts a per-breakpoint responsive object.
responsiveMode	`ResponsiveMode`	`"screen"`	Whether responsive values resolve against the viewport ("screen") or nearest container ("container").
wrap	`ResponsiveValue<FlexWrap>`	`"nowrap"`	Wrap behavior. Accepts a per-breakpoint responsive object.

Also exports

interfaceFlexProps

Composition

Used by

DataGrid, MobileNavigationRoot, SettingsCard