Overview
Flex provides complete flexbox control with props for direction, alignment, justification, wrapping, and gap. For common use cases, prefer the specialized Stack (vertical) or Group (horizontal) components.
Import
import { Flex } from '@kivora/react';
Props
direction
'row' | 'col' | 'row-reverse' | 'col-reverse'
default:"'row'"
Flex direction (main axis).
align
'start' | 'center' | 'end' | 'baseline' | 'stretch'
default:"'stretch'"
Alignment along the cross axis (perpendicular to direction).
justify
'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
default:"'start'"
Distribution along the main axis.
wrap
'wrap' | 'nowrap' | 'wrap-reverse'
default:"'nowrap'"
Whether items should wrap onto multiple lines.
gap
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16
default:"0"
Gap between items in Tailwind spacing units (1 = 0.25rem).
When true, sets w-full to fill available width.
Usage
Basic flex layout
<Flex direction="row" justify="between" align="center" gap={4}>
<Text>Label</Text>
<Badge>New</Badge>
</Flex>
Vertical flex
<Flex direction="col" gap={3}>
<Card title="First" />
<Card title="Second" />
<Card title="Third" />
</Flex>
Centered content
<Flex justify="center" align="center" className="h-screen">
<Spinner />
</Flex>
Space between items
<Flex justify="between" align="center">
<Button>Cancel</Button>
<Button variant="primary">Save</Button>
</Flex>
Wrapping items
<Flex wrap="wrap" gap={4}>
{tags.map(tag => (
<Badge key={tag.id}>{tag.name}</Badge>
))}
</Flex>
Reverse direction
<Flex direction="row-reverse" gap={2}>
<Button>Primary action</Button>
<Button variant="secondary">Secondary</Button>
</Flex>
Layout Examples
<Flex justify="between" align="center" className="border-b pb-4">
<div>
<Heading size="lg">Dashboard</Heading>
<Text size="sm" className="text-gray-600">Welcome back</Text>
</div>
<Group gap={2}>
<Button variant="secondary">Settings</Button>
<Button variant="primary">New Project</Button>
</Group>
</Flex>
<Flex direction="col" className="border rounded-lg p-6">
<Heading size="md">Card Title</Heading>
<Text className="flex-1 mt-2">Content goes here...</Text>
<Flex justify="end" gap={2} className="mt-4 pt-4 border-t">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Continue</Button>
</Flex>
</Flex>
Responsive layout
<Flex
direction="col"
className="md:flex-row"
gap={6}
>
<div className="flex-1">
<MainContent />
</div>
<aside className="w-full md:w-64">
<Sidebar />
</aside>
</Flex>
Best Practices
- Use
Stack for simple vertical layouts
- Use
Group for simple horizontal layouts
- Use
Flex when you need precise control over flex properties
- Prefer
justify="between" over manual spacing for distributing items
- Combine with
grow prop for full-width layouts
- Use responsive Tailwind classes (e.g.,
md:flex-row) for mobile-first designs