@vibe-labs/design-flex

Flexbox utility classes for the Vibe Design System — display, direction, wrap, grow/shrink, basis, and order.

Installation

@import "@vibe-labs/design-flex";

Tokens

None — this package provides utility classes only.

Utilities / Generated Classes

Base Utilities (flex.css)

Core flex display classes in @layer vibe.utilities:

.flex · .inline-flex

Generated Utilities (flex.g.css)

All classes in @layer vibe.utilities.

Direction

.flex-row · .flex-row-reverse · .flex-col · .flex-col-reverse

Wrap

.flex-wrap · .flex-wrap-reverse · .flex-nowrap

Grow / Shrink

Class	Value	Behavior
.flex-none	flex: none	Fixed size, won't grow or shrink
.flex-initial	flex: 0 1 auto	Won't grow, will shrink
.flex-1	flex: 1 1 0%	Fill available space equally
.grow / .grow-0	flex-grow: 1 / 0	Toggle grow
.shrink / .shrink-0	flex-shrink: 1 / 0	Toggle shrink

Basis

.basis-auto · .basis-0 · .basis-full · .basis-1/2 · .basis-1/3 · .basis-2/3 · .basis-1/4 · .basis-3/4

Order

• .order-first (-9999) · .order-last (9999) · .order-none (0)
• .order-10 … .order-60 (steps of 10)

Dist Structure

File	Description
index.css	Barrel — imports both files below
flex.css	Base flex display classes
flex.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build

---

Usage Guide

Provides flexbox utility classes for building one-dimensional layouts in the Vibe Design System.

Import

@import "@vibe-labs/design-flex";

Common Patterns

1. Horizontal nav bar with space between items

<nav class="flex items-center justify-between px-6 py-4">
  <a href="/">Logo</a>
  <ul class="flex gap-6">
    <li>Link</li>
    <li>Link</li>
  </ul>
  <button>Sign in</button>
</nav>

2. Vertically centred card content

<div class="flex flex-col items-center justify-center gap-4 p-8">
  <img src="icon.svg" alt="" />
  <h2>Card Title</h2>
  <p>Description</p>
</div>

3. Sidebar + main content layout

<div class="flex gap-8">
  <aside class="flex-none w-64">Sidebar</aside>
  <main class="flex-1">Main content</main>
</div>

4. Equal-width button group

<div class="flex gap-2">
  <button class="flex-1 btn-md">Cancel</button>
  <button class="flex-1 btn-md">Confirm</button>
</div>

5. Wrap a tag cloud

<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 rounded-full bg-elevated">Design</span>
  <span class="px-3 py-1 rounded-full bg-elevated">Engineering</span>
  <span class="px-3 py-1 rounded-full bg-elevated">Product</span>
</div>

6. Reorder elements visually

<div class="flex">
  <div class="order-last">Appears last in HTML, first visually</div>
  <div>Normal order</div>
  <div class="order-first">Appears first visually</div>
</div>

Token Reference

Class	CSS	Behavior
.flex-1	flex: 1 1 0%	Fills available space
.flex-none	flex: none	Fixed, no grow or shrink
.grow	flex-grow: 1	Grow to fill
.shrink-0	flex-shrink: 0	Never shrink
.basis-1/2	flex-basis: 50%	Half-width starting size