Flex

Flex is a flex container with prebuilt direction, gap, align, justify, and wrap variants. Defaults to a vertical stack with gap="md" because that's what most form / dashboard sections want.

import { Flex } from '@42-central/ui-react/flex';

<Flex gap="lg">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</Flex>

Playground

<Component
  direction="col"
  gap="md"
  align="stretch"
/>

Full prop browser

Direction

<Flex gap="md">
  <Button>One</Button>
  <Button>Two</Button>
</Flex>

<Flex direction="row" gap="md">
  <Button>One</Button>
  <Button>Two</Button>
</Flex>

Alignment

Use align for cross-axis alignment and justify for main-axis. Common toolbar pattern:

<Flex direction="row" justify="between" align="center">
  <Button variant="subtle">Cancel</Button>
  <Flex direction="row" gap="md">
    <Button>Save draft</Button>
    <Button>Publish</Button>
  </Flex>
</Flex>

API

When to use Flex vs Grid

Flex flows children in one direction. Reach for Grid when you need equal-width tracks (cards on a dashboard, columns of a settings page).

Changelog