Flex
Arrange content along one axis, from compact inline metadata to responsive application toolbars.
FlexA responsive toolbar
Resize the viewport: the title and action stack first, then share a row.
Components
Build with one consistent system.
<Flex
direction="column"
directionSm="row"
align="start"
alignSm="center"
justify="between"
class="p-3"
>
<div>
<h3 class="m-0">Components</h3>
<p class="mb-0">Build with one consistent system.</p>
</div>
<BtnLink href="/components/layout/grid/" tone="accent">Explore Grid</BtnLink>
</Flex>Wrapping metadata
Wrapping keeps labels readable when there is less room. Gap utilities control spacing independently of alignment.
<Flex wrap="true" align="center" class="gap-2">
<Badge tone="accent">TypeScript</Badge>
<Badge>Theme aware</Badge>
<Badge>Responsive</Badge>
<Badge>Accessible HTML</Badge>
<Badge>Independent components</Badge>
</Flex>Semantic list and inline content
Use container for document semantics and inline for a layout that participates in a text line.
- Keep source order meaningful.
- Use layout to support the reading order.
Build status:
<Flex container="ul" direction="column" class="pl-4">
<li>Keep source order meaningful.</li>
<li>Use layout to support the reading order.</li>
</Flex>
<p>
Build status:
<Flex :inline="true" align="center" class="gap-1">
<Icon name="lucide:check" aria-hidden="true" />
<strong>Passing</strong>
</Flex>
</p>Behavior and accessibility
Reversed directions change visual order, not reading or keyboard order. Prefer source order that makes sense without CSS. Breakpoint props inherit the smaller layout until an explicit override applies.
API reference
Flex contract
Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.
container
RefOrValue<string> - Default
div
HTML element used as the layout root. Choose a semantic element such as section, nav or ul when its children fit that structure.
direction
RefOrValue<FlexDirection> - Default
row
Main-axis direction: row, row-reverse, column or column-reverse.
directionSm
RefOrValue<FlexDirection> - Default
inherits smaller breakpoint
Main-axis direction: row, row-reverse, column or column-reverse. Applies from the theme’s sm breakpoint upward.
directionMd
RefOrValue<FlexDirection> - Default
inherits smaller breakpoint
Main-axis direction: row, row-reverse, column or column-reverse. Applies from the theme’s md breakpoint upward.
directionLg
RefOrValue<FlexDirection> - Default
inherits smaller breakpoint
Main-axis direction: row, row-reverse, column or column-reverse. Applies from the theme’s lg breakpoint upward.
directionXl
RefOrValue<FlexDirection> - Default
inherits smaller breakpoint
Main-axis direction: row, row-reverse, column or column-reverse. Applies from the theme’s xl breakpoint upward.
align
RefOrValue<FlexAlign> - Default
stretch
Cross-axis alignment: stretch, start, center, end or baseline.
alignSm
RefOrValue<FlexAlign> - Default
inherits smaller breakpoint
Cross-axis alignment: stretch, start, center, end or baseline. Applies from the theme’s sm breakpoint upward.
alignMd
RefOrValue<FlexAlign> - Default
inherits smaller breakpoint
Cross-axis alignment: stretch, start, center, end or baseline. Applies from the theme’s md breakpoint upward.
alignLg
RefOrValue<FlexAlign> - Default
inherits smaller breakpoint
Cross-axis alignment: stretch, start, center, end or baseline. Applies from the theme’s lg breakpoint upward.
alignXl
RefOrValue<FlexAlign> - Default
inherits smaller breakpoint
Cross-axis alignment: stretch, start, center, end or baseline. Applies from the theme’s xl breakpoint upward.
justify
RefOrValue<FlexJustify> - Default
start
Main-axis distribution: start, center, end, stretch, between, around or evenly.
justifySm
RefOrValue<FlexJustify> - Default
inherits smaller breakpoint
Main-axis distribution: start, center, end, stretch, between, around or evenly. Applies from the theme’s sm breakpoint upward.
justifyMd
RefOrValue<FlexJustify> - Default
inherits smaller breakpoint
Main-axis distribution: start, center, end, stretch, between, around or evenly. Applies from the theme’s md breakpoint upward.
justifyLg
RefOrValue<FlexJustify> - Default
inherits smaller breakpoint
Main-axis distribution: start, center, end, stretch, between, around or evenly. Applies from the theme’s lg breakpoint upward.
justifyXl
RefOrValue<FlexJustify> - Default
inherits smaller breakpoint
Main-axis distribution: start, center, end, stretch, between, around or evenly. Applies from the theme’s xl breakpoint upward.
wrap
RefOrValue<FlexWrap> - Default
nowrap
Wrapping: false or nowrap keeps one line; true or wrap allows lines; reverse reverses the cross-axis line order.
wrapSm
RefOrValue<FlexWrap> - Default
inherits smaller breakpoint
Wrapping: false or nowrap keeps one line; true or wrap allows lines; reverse reverses the cross-axis line order. Applies from the theme’s sm breakpoint upward.
wrapMd
RefOrValue<FlexWrap> - Default
inherits smaller breakpoint
Wrapping: false or nowrap keeps one line; true or wrap allows lines; reverse reverses the cross-axis line order. Applies from the theme’s md breakpoint upward.
wrapLg
RefOrValue<FlexWrap> - Default
inherits smaller breakpoint
Wrapping: false or nowrap keeps one line; true or wrap allows lines; reverse reverses the cross-axis line order. Applies from the theme’s lg breakpoint upward.
wrapXl
RefOrValue<FlexWrap> - Default
inherits smaller breakpoint
Wrapping: false or nowrap keeps one line; true or wrap allows lines; reverse reverses the cross-axis line order. Applies from the theme’s xl breakpoint upward.
inline
RefOrValue<boolean | string> - Default
false
Render inline-flex instead of a block-level flex container. Accepts true or the string true.
Composition
Default slot: direct flex items. Flex adds layout only; it has no selection state, keyboard model or events. Register defineFlexComponents.