@vibe-labs/design-flex

Flexbox utility classes for the Vibe Design System.

Usage

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

Contents

Base Utilities (flex.css)

Core flex display classes in @layer vibe.utilities:

.flex · .inline-flex

Generated Utilities (flex.g.css)

Utility classes generated into @layer vibe.utilities via the build script.

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