# Flex (/docs/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.

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

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

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Direction [#direction]

<Preview align="block" code="&#x22;<Flex gap=\&#x22;md\&#x22;>\n  <Button>One</Button>\n  <Button>Two</Button>\n</Flex>\n\n<Flex direction=\&#x22;row\&#x22; gap=\&#x22;md\&#x22;>\n  <Button>One</Button>\n  <Button>Two</Button>\n</Flex>&#x22;">
  <div className="grid gap-4 sm:grid-cols-2">
    <Flex gap="md">
      <Button size="sm">
        One
      </Button>

      <Button size="sm">
        Two
      </Button>

      <Button size="sm">
        Three
      </Button>
    </Flex>

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

      <Button size="sm">
        Two
      </Button>

      <Button size="sm">
        Three
      </Button>
    </Flex>
  </div>
</Preview>

## Alignment [#alignment]

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

<Preview align="block" code="&#x22;<Flex direction=\&#x22;row\&#x22; justify=\&#x22;between\&#x22; align=\&#x22;center\&#x22;>\n  <Button variant=\&#x22;subtle\&#x22;>Cancel</Button>\n  <Flex direction=\&#x22;row\&#x22; gap=\&#x22;md\&#x22;>\n    <Button>Save draft</Button>\n    <Button>Publish</Button>\n  </Flex>\n</Flex>&#x22;">
  <div className="rounded-md border border-gray-light-300 p-2 dark:border-gray-dark-700">
    <Flex direction="row" justify="between" align="center">
      <Button size="sm" variant="subtle">
        Cancel
      </Button>

      <Flex direction="row" gap="md">
        <Button size="sm">
          Save draft
        </Button>

        <Button size="sm">
          Publish
        </Button>
      </Flex>
    </Flex>
  </div>
</Preview>

## API [#api]

<TypeTable
  type="{
  direction: {
    type: &#x22;'row' | 'col'&#x22;,
    default: &#x22;'col'&#x22;,
    description: 'Flex direction.',
  },
  gap: {
    type: &#x22;'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'&#x22;,
    default: &#x22;'md'&#x22;,
    description: 'Gap on the named t-shirt scale (xxs=2px … md=8px … xxl=24px).',
  },
  align: {
    type: &#x22;'start' | 'center' | 'end' | 'stretch' | 'baseline'&#x22;,
    default: &#x22;'stretch'&#x22;,
    description: 'Cross-axis alignment (align-items).',
  },
  justify: {
    type: &#x22;'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'&#x22;,
    default: &#x22;'start'&#x22;,
    description: 'Main-axis alignment (justify-content).',
  },
  wrap: {
    type: 'boolean',
    default: 'false',
    description: 'Allow children to wrap to the next line.',
  },
  asChild: {
    type: 'boolean',
    default: 'false',
    description: 'Render children as the root element (Ark UI polymorphism).',
  },
}"
/>

## When to use Flex vs Grid [#when-to-use-flex-vs-grid]

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