Flex

Flex is a utility component for building layouts with Tailwind’s flexbox classes. It exposes all common flex, direction, wrap, alignment, and justification options as props for rapid, composable UIs.

Basic Usage

Item 1 (flex-1)

Item 2 (flex-auto)

Item 3 (flex-initial)

Item 4 (flex-none)

Code Example

Basic.vue

This is a basic Flex layout. The first item uses flex-1, the second flex-auto, the third flex-initial, and the fourth flex-none, demonstrating several common flex child utilities.

For advanced control, some Tailwind flex utilities are not available as props. Add these directly as classes on your elements as needed:

Show Tailwind flex utilities which are not included

These class utilities have to be manually applied through the class prop.

Shrink / No Shrink
- shrink
- shrink-0
No Grow
- grow-0
Self Alignment
Content Alignment (multi-line flex containers)
Flex Basis
- basis-* (e.g., basis-1/2, basis-full)

Components

The Flex components include the following:

Flex - A flexible box layout container with full Tailwind flex utility support via props.
FlexItem - A flexible item for use inside Flex, with prop-driven Tailwind flex child utilities.

Flex

The Flex component is a wrapper for Tailwind's flexbox utilities. It exposes props for all common flex, direction, wrap, alignment, and justification options, as well as shortcuts for common patterns.

Flex Props	Type	Description
is	string \| object	Sets the rendered element type (default: `div`).
join	boolean	Adds the `join-item` class for grouped UIs.
flex	boolean	Enables flex display (`flex`).
flex1	boolean	Applies `flex-1` utility.
flexAuto	boolean	Applies `flex-auto` utility.
flexInitial	boolean	Applies `flex-initial` utility.
none	boolean	Applies `flex-none` utility.
direction	string	Sets flex direction.
row	boolean	Shortcut for `direction="row"`.
col	boolean	Shortcut for `direction="col"`.
reverse	boolean	Reverses the direction (used with `row` or `col`).
wrap	boolean	Applies `flex-wrap` utility.
nowrap	boolean	Applies `flex-nowrap` utility.
wrapReverse	boolean	Applies `flex-wrap-reverse` utility.
grow	boolean	Applies `flex-grow` utility.
justify	string	Sets horizontal alignment of children to one of the below props.
justifyStart	boolean	Aligns items to the start of the main axis (`justify-start`).
justifyEnd	boolean	Aligns items to the end of the main axis (`justify-end`).
justifyCenter	boolean	Centers items along the main axis (`justify-center`).
justifyBetween	boolean	Distributes items evenly along the main axis with the first item at the start and the last item at the end (`justify-between`).
justifyAround	boolean	Distributes items evenly along the main axis with equal space around each item (`justify-around`).
justifyEvenly	boolean	Distributes items evenly along the main axis with equal space between and around each item (`justify-evenly`).
items	string	Sets alignment of children along the cross axis (perpendicular to flex direction) using Tailwind's items-* utilities.
itemsStart	boolean	Aligns items to the start of the cross axis (`items-start`).
itemsEnd	boolean	Aligns items to the end of the cross axis (`items-end`).
itemsCenter	boolean	Centers items along the cross axis (`items-center`).
itemsBaseline	boolean	Aligns items along their baselines (`items-baseline`).
itemsStretch	boolean	Stretches items to fill the container along the cross axis (`items-stretch`).

Flex Props

Type

Description

string | object

Sets the rendered element type (default: div).

join

boolean

Adds the join-item class for grouped UIs.

flex

boolean

Enables flex display (flex).

flex1

boolean

Applies flex-1 utility.

flexAuto

boolean

Applies flex-auto utility.

flexInitial

boolean

Applies flex-initial utility.

none

boolean

Applies flex-none utility.

direction

string

Sets flex direction.

row

boolean

Shortcut for direction="row".

col

boolean

Shortcut for direction="col".

reverse

boolean

Reverses the direction (used with row or col).

wrap

boolean

Applies flex-wrap utility.

nowrap

boolean

Applies flex-nowrap utility.

wrapReverse

boolean

Applies flex-wrap-reverse utility.

grow

boolean

Applies flex-grow utility.

justify

string

Sets horizontal alignment of children to one of the below props.

justifyStart

boolean

Aligns items to the start of the main axis (justify-start).

justifyEnd

boolean

Aligns items to the end of the main axis (justify-end).

justifyCenter

boolean

Centers items along the main axis (justify-center).

justifyBetween

boolean

Distributes items evenly along the main axis with the first item at the start and the last item at the end (justify-between).

justifyAround

boolean

Distributes items evenly along the main axis with equal space around each item (justify-around).

justifyEvenly

boolean

Distributes items evenly along the main axis with equal space between and around each item (justify-evenly).

items

string

Sets alignment of children along the cross axis (perpendicular to flex direction) using Tailwind's items-* utilities.

itemsStart

boolean

Aligns items to the start of the cross axis (items-start).

itemsEnd

boolean

Aligns items to the end of the cross axis (items-end).

itemsCenter

boolean

Centers items along the cross axis (items-center).

itemsBaseline

boolean

Aligns items along their baselines (items-baseline).

itemsStretch

boolean

Stretches items to fill the container along the cross axis (items-stretch).

Flex Slots	Description
default	Slot for flex children.

Flex Slots

Description

default

Slot for flex children.

FlexItem

The FlexItem component is designed to be used as a direct child of Flex. It exposes common Tailwind flex child utilities (such as flex-1, flex-auto, flex-initial, flex-none, and flex-grow) as props, allowing for a clean, prop-driven API.

FlexItem Props	Type	Description
is	any	Sets the rendered element type (default: `div`).
join	boolean	Adds the `join-item` class for grouped UIs.
flex	boolean	Enables flex display (`flex`).
flex1	boolean	Applies `flex-1` utility.
flexAuto	boolean	Applies `flex-auto` utility.
flexInitial	boolean	Applies `flex-initial` utility.
none	boolean	Applies `flex-none` utility.
grow	boolean	Applies `flex-grow` utility.
direction	string	Sets flex direction.
row	boolean	Shortcut for `direction="row"`.
col	boolean	Shortcut for `direction="col"`.
reverse	boolean	Reverses the direction (used with `row` or `col`).
wrap	boolean	Applies `flex-wrap` utility.
nowrap	boolean	Applies `flex-nowrap` utility.
wrapReverse	boolean	Applies `flex-wrap-reverse` utility.

FlexItem Props

Type

Description

any

Sets the rendered element type (default: div).

join

boolean

Adds the join-item class for grouped UIs.

flex

boolean

Enables flex display (flex).

flex1

boolean

Applies flex-1 utility.

flexAuto

boolean

Applies flex-auto utility.

flexInitial

boolean

Applies flex-initial utility.

none

boolean

Applies flex-none utility.

grow

boolean

Applies flex-grow utility.

direction

string

Sets flex direction.

row

boolean

Shortcut for direction="row".

col

boolean

Shortcut for direction="col".

reverse

boolean

Reverses the direction (used with row or col).

wrap

boolean

Applies flex-wrap utility.

nowrap

boolean

Applies flex-nowrap utility.

wrapReverse

boolean

Applies flex-wrap-reverse utility.

FlexItem Slots	Description
default	Slot for flex item content.

FlexItem Slots

Description

default

Slot for flex item content.

Examples

Basic

The default Flex usage with common flex child utilities.

Item 1 (flex-1)

Item 2 (flex-auto)

Item 3 (flex-initial)

Item 4 (flex-none)

Code Example

Basic.vue

Playground

Interactive playground to experiment with flex direction, alignment, justification, wrapping, and item sizing. Use the controls to see how each prop affects layout in real time.

Wrap:

Code Example

Demo.vue