Flex

A flexible flexbox layout component with support for row/column directions and alignment options

Preview

Row

First

Second

Third

Row Reverse

First (right)

Second (middle)

Third (left)

Column

First

Second

Third

Column Reverse

First (bottom)

Second (middle)

Third (top)

Installation

Usage

API Reference

Prop	Type	Default	Description
`row`	`boolean`	`false`	Use row direction (default is column)
`reversed`	`boolean`	`false`	Reverse the flex direction
`justify`	`'start' \| 'end' \| 'end-safe' \| 'center' \| 'center-safe' \| 'between' \| 'around' \| 'evenly' \| 'stretch' \| 'baseline' \| 'normal'`	`'normal'`	Justify content along the main axis
`align`	`'start' \| 'end' \| 'end-safe' \| 'center' \| 'center-safe' \| 'baseline' \| 'baseline-last' \| 'stretch'`	`'stretch'`	Align items along the cross axis
`withPadding`	`boolean`	`false`	Apply CSS variable-based padding
`withGaps`	`boolean`	`false`	Apply CSS variable-based gap
`withSpacing`	`boolean`	`false`	Apply both padding and gap
`expanded`	`boolean`	`false`	Apply `flex-1` to fill available space
`className`	`string`	-	Additional CSS classes