Components / Layout

Flex

Flex is a <Box display="flex"> with an optional direction prop. Distinct from Stack: Flex has no opinion on gap, so reach for it when the layout wants flex semantics but not Stack's spacing defaults.

Loading playground…

What it is

A thin wrapper over Box that sets display: flex. Every Box style prop applies — including gap, when you want it explicitly — and direction maps to flexDirection. Stack is the better choice when the layout reads as "items with consistent spacing between them"; Flex is the better choice when the layout uses flex for alignment or sizing but doesn't need a spacing convention.

Install

Flex is exported from usemotif. No separate install.

example.tsx

import { Flex } from 'usemotif';

API

Flex

stable

function Flex(props: FlexProps): JSX.Element

direction"row" | "column" | "row-reverse" | "column-reverse"

Maps to `flexDirection`. Optional — when omitted, the renderer uses its default (web: `row`).

…BoxPropsBoxProps

Every prop Box accepts. `display` is managed by Flex.

Examples

Single-row layout with a Spacer:

example.tsx

<Flex direction="row" alignItems="center">
<Logo />
<Spacer />
<UserMenu />
</Flex>

Flex column without Stack's gap convention:

example.tsx

<Flex direction="column" flex={1} justifyContent="space-between">
<Header />
<Footer />
</Flex>