Flex
Flexbox layout component with full control over direction, alignment, justification, wrapping, and gap
The Flex component provides a complete flexbox layout abstraction. Unlike Stack, which is optimized for single-direction layouts, Flex gives you full control over direction, justification, alignment, wrapping, and gap -- making it ideal for complex layout arrangements.
Import
import { Flex } from '@nim-ui/components';Basic Usage
Code
<Flex gap="md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Flex>Direction
The direction prop controls the main axis direction of the flex container.
Code
<Flex direction="row">Row (default)</Flex>
<Flex direction="column">Column</Flex>
<Flex direction="row-reverse">Row reversed</Flex>
<Flex direction="column-reverse">Column reversed</Flex>Justify
The justify prop controls how items are distributed along the main axis.
Code
<Flex justify="start">Pack items to the start</Flex>
<Flex justify="center">Center items</Flex>
<Flex justify="end">Pack items to the end</Flex>
<Flex justify="between">Space between items</Flex>
<Flex justify="around">Space around items</Flex>
<Flex justify="evenly">Space evenly between items</Flex>Align
The align prop controls cross-axis alignment.
Code
<Flex align="start">Align to start</Flex>
<Flex align="center">Align to center</Flex>
<Flex align="end">Align to end</Flex>
<Flex align="stretch">Stretch to fill (default when set)</Flex>
<Flex align="baseline">Align to text baseline</Flex>Wrap
The wrap prop enables flex wrapping so items flow to the next line when they exceed the container width.
Code
<Flex wrap gap="sm">
<div className="w-32">Item 1</div>
<div className="w-32">Item 2</div>
<div className="w-32">Item 3</div>
<div className="w-32">Item 4</div>
<div className="w-32">Item 5</div>
<div className="w-32">Item 6</div>
</Flex>Gap
The gap prop controls spacing between flex items.
Code
<Flex gap="xs">Extra small gap (0.25rem)</Flex>
<Flex gap="sm">Small gap (0.5rem)</Flex>
<Flex gap="md">Medium gap (1rem)</Flex>
<Flex gap="lg">Large gap (1.5rem)</Flex>
<Flex gap="xl">Extra large gap (2rem)</Flex>Props
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'row' | Flex direction for the main axis |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | - | How items are distributed along the main axis (justify-content) |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | - | How items are aligned on the cross axis (align-items) |
wrap | boolean | false | Whether items should wrap to the next line |
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | - | Gap between flex items |
className | string | - | Additional CSS classes to apply |
children* | ReactNode | - | Flex items to render |
Usage Examples
Header Layout
function Header() {
return (
<Flex justify="between" align="center" gap="md">
<div className="text-xl font-bold">Logo</div>
<nav>
<Flex gap="md" align="center">
<a href="/about">About</a>
<a href="/docs">Docs</a>
<Button variant="primary">Sign Up</Button>
</Flex>
</nav>
</Flex>
);
}Centered Content
function EmptyState() {
return (
<Flex
direction="column"
justify="center"
align="center"
gap="lg"
className="min-h-[400px]"
>
<img src="/empty.svg" alt="" className="w-48" />
<h2>No items found</h2>
<p>Try adjusting your search or filters.</p>
<Button>Create New</Button>
</Flex>
);
}Tag Cloud
function TagCloud({ tags }) {
return (
<Flex wrap gap="sm">
{tags.map((tag) => (
<Badge key={tag} variant="default">
{tag}
</Badge>
))}
</Flex>
);
}Accessibility
The Flex component renders a <div> element with flexbox CSS applied. When using direction="row-reverse" or direction="column-reverse", be aware that the visual order differs from the DOM order, which can confuse screen reader users and keyboard navigation. Ensure the DOM order matches the logical reading order when possible.
{/* Use tabIndex to ensure keyboard order matches visual order */}
<Flex direction="row-reverse" gap="md">
<Button tabIndex={2}>Second visually</Button>
<Button tabIndex={1}>First visually</Button>
</Flex>