Flex Layout
A flexible layout primitive.
Basic Usage
A simple flex container. Perfect for layouts like stat cards.
Total Revenue
$45,231.89
Active Users
2,350
<prism-flex gap="24">
<!-- Stat Card 1 -->
<prism-card class="flex-1">
<div class="flex items-start justify-between mb-4">
<div>
<div class="text-sm text-slate-500 font-medium">Total Revenue</div>
<div class="text-3xl font-bold text-slate-900 mt-1">$45,231.89</div>
</div>
<div class="p-2 bg-primary-50 rounded-lg text-primary-600">
<prism-icon name="money-dollar-circle-line" size="24"></prism-icon>
</div>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-green-600 flex items-center font-medium bg-green-50 px-2 py-0.5 rounded-full">
<prism-icon name="arrow-up-line" size="14" class="mr-1"></prism-icon>
20.1%
</span>
<span class="text-slate-400">vs last month</span>
</div>
</prism-card>
<!-- Stat Card 2 -->
<prism-card class="flex-1">
<!-- ... -->
</prism-card>
</prism-flex>Vertical Stack
Stack items vertically. Great for lists and feeds.
Activity Feed
Sarah Connor2m ago
Deployed the new repayment feature to production. 🚀
John Doe1h ago
Commented on #PR-420: "Looks good to me!"
<prism-card header="Activity Feed">
<prism-flex [vertical]="true" gap="0" class="divide-y divide-slate-100">
<!-- Item 1 -->
<div class="py-4 hover:bg-slate-50 transition cursor-pointer -mx-6 px-6">
<prism-flex gap="16" align="start">
<prism-avatar label="SC" size="md" class="bg-indigo-100 text-indigo-700"></prism-avatar>
<div class="flex-1">
<div class="flex justify-between items-start">
<span class="font-semibold text-slate-900">Sarah Connor</span>
<span class="text-xs text-slate-400">2m ago</span>
</div>
<p class="text-sm text-slate-600 mt-1">Deployed the new repayment feature to production. 🚀</p>
</div>
</prism-flex>
</div>
<!-- ... -->
</prism-flex>
</prism-card>Justify Content
Control horizontal alignment. Essential for navigation bars.
<prism-card>
<prism-flex justify="between" align="center" class="w-full">
<prism-flex gap="12" align="center">
<prism-button variant="text" icon="ri-menu-line" size="sm"></prism-button>
<span class="font-bold text-lg text-slate-900">Dashboard</span>
</prism-flex>
<prism-flex gap="12">
<prism-button variant="outline" size="sm" icon="ri-filter-3-line">Filter</prism-button>
<prism-button variant="primary" size="sm" icon="ri-add-line">New Report</prism-button>
</prism-flex>
</prism-flex>
</prism-card>Align Items
Control vertical alignment. Useful for user rows and media objects.
John Doe
Product Designer
<prism-card>
<div class="divide-y divide-slate-100 ">
<div class="py-3">
<prism-flex align="center" gap="16">
<prism-avatar label="JD" size="lg" class="bg-indigo-600 text-white"></prism-avatar>
<div class="flex-1">
<div class="text-lg font-bold text-slate-900">John Doe</div>
<div class="text-slate-500 text-sm">Product Designer</div>
</div>
<prism-tag variant="success" label="Active"></prism-tag>
<prism-button variant="text" icon="ri-more-2-fill" class="text-slate-400"></prism-button>
</prism-flex>
</div>
</div>
</prism-card>Gap
Control spacing between items with gap.
<prism-flex gap="16" wrap="wrap">
<prism-tag variant="primary" label="Angular"></prism-tag>
<prism-tag variant="secondary" label="React"></prism-tag>
<prism-tag variant="success" label="Vue"></prism-tag>
<prism-tag variant="warning" label="Svelte"></prism-tag>
<!-- ... -->
</prism-flex>API Data
| Name | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | Whether to stack items vertically. |
justify | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'start' | Justify content alignment. |
align | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'start' | Align items alignment. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Flex wrap behavior. |
gap | number | string | 0 | Gap between items (px if number). |