Flex

The Flex component is a utility component designed to simplify working with flexbox layouts in your application. It provides an intuitive API to manage flex direction, alignment, justification, wrapping, and spacing using Tailwind CSS utility classes.

Playground

The Flex component is a proxy for using Tailwind’s Flex Box utility classes

iaVV

HbTG

MNPD

2A6s

AgKd

Column

Grow

Shrink

GapX3

GapY3

Justifystart

Itemsstretch

Wrapwrap

In this example effect can be observed when shrink is enabled

Component API

A utility component for creating flexible layouts with Flex Box

Prop	Default	Description
`column`	—	`boolean` Determines if the flex direction is column instead of row.
`justify`	`'start'`	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'` Controls how flex items are aligned along the main axis.
`items`	`'stretch'`	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` Controls alignment of flex items along the cross axis.
`self`	—	`'auto' \| 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'` Controls individual alignment of a flex item.
`wrap`	`'none'`	`'none' \| 'wrap' \| 'reverse'` Determines if flex items should wrap.
`content`	—	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'` Controls alignment of flex content along the cross axis.
`gap`	—	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` Defines the space between flex items.
`grow`	—	`boolean` Determines whether the flex item should grow to fill available space.
`shrink`	`true`	`boolean` Determines whether the flex item should shrink if needed.
`className`	—	`string` Additional class names for styling.
`title`	—	`string` Adds a title attribute to the flex container.
`onClick`	—	`(event: React.MouseEvent) => void` Callback function fired when the flex container is clicked.
`children`	—	`React.ReactNode` Content to be rendered inside the Flex container.