Flex

A flexible box layout component that provides a convenient way to create flexbox layouts with various alignment and spacing options.

Most layout controls are boolean toggles. When you omit them, Flex falls back to CSS defaults: row, nowrap, flex-start, and the theme s gap.

XXS

XXL

XXXL

CENTER

BOTH AXES

Shorthand	`center`
Cross axis	`y-starty-endy-centery-baseliney-stretch`

The idea is that you control the component by using boolean props. This allows you to define layouts quickly.

Name	Default	Type
`inline`	`false`	`boolean` Makes the flex container inline
`wrap`	`false`	`boolean` Allows flex items to wrap to multiple lines
`wrap-reverse`	`false`	`boolean` Reverses the wrap direction
`row`	`row`	`boolean` Sets flex direction to row
`column`	`false`	`boolean` Sets flex direction to column
`row-reverse`	`false`	`boolean` Sets flex direction to row-reverse
`column-reverse`	`false`	`boolean` Sets flex direction to column-reverse
`gap`	`s`	`xxs` `xs` `s` `m` `l` `xl` `xxl` `xxxl` `number` Gap between flex items (theme spacing token or custom unit value)
`center`	`false`	`boolean` Centers items on both axes
`x-start`	`flex-start`	`boolean` Aligns items to the start of the main axis
`x-end`	`false`	`boolean` Aligns items to the end of the main axis
`x-center`	`false`	`boolean` Centers items along the main axis
`x-between`	`false`	`boolean` Distributes items with space between them
`x-around`	`false`	`boolean` Distributes items with space around them
`x-evenly`	`false`	`boolean` Distributes items with equal space around them
`y-start`	`flex-start`	`boolean` Aligns items to the start of the cross axis
`y-end`	`false`	`boolean` Aligns items to the end of the cross axis
`y-center`	`false`	`boolean` Centers items along the cross axis
`y-baseline`	`false`	`boolean` Aligns items along their baselines
`y-stretch`	`false`	`boolean` Stretches items across the cross axis
`expand`	`false`	`boolean` Makes the flex container expand to full width

Name	Accepts	Description
`default`	`any`	The flex items to be laid out