Layout

Flex

A thin wrapper around CSS flexbox that exposes the most common props — gap, justify, align, vertical — so you don't have to reach for Tailwind classes for simple layouts.

justify=space-between · align=center

Title

vertical · gap=middle

Row 1

Row 2

Row 3

wrap · gap=8

alpha

beta

gamma

delta

epsilon

zeta

Installation

npx benflux-ui add flex

Custom HTML tag

// Renders as <section> instead of <div>
<Flex component="section" justify="center" gap={24}>
  <Card />
  <Card />
</Flex>

Props

Prop	Type	Default	Description
vertical	boolean	false	Use column flex direction
wrap	boolean \| "wrap" \| "nowrap" \| "wrap-reverse"	false	Flex-wrap value
justify	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "space-evenly"	—	justify-content value
align	"flex-start" \| "flex-end" \| "center" \| "baseline" \| "stretch"	—	align-items value
gap	number \| "small" \| "middle" \| "large"	—	Gap between children (small=8, middle=16, large=24)
flex	string \| number	—	CSS flex shorthand applied to the container
component	keyof JSX.IntrinsicElements	"div"	HTML tag to render