Flex

A flex container div (or any element) with shorthand props for all core flexbox properties: direction, alignment, justification, gap, and wrapping. CSS custom properties are used under the hood so all values are applied at render time.

Row (default)

One
Two
Three
<Flex gap="md">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</Flex>

Column direction

First
Second
Third
<Flex direction="column" gap="sm">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Flex>

Justify and align

Start
Center
End
<Flex justify="space-between" align="center" style="height:80px">
  <div>Start</div>
  <div>Center</div>
  <div>End</div>
</Flex>

Wrapping

A
B
C
D
E
F
G
H
<Flex wrap="wrap" gap="sm" style="max-width:300px">
  {items.map((item) => <div key={item}>{item}</div>)}
</Flex>

Props

PropTypeDefaultDescription
gap'xs'|'sm'|'md'|'lg'|'xl'|string—Gap between all children
rowGap'xs'|'sm'|'md'|'lg'|'xl'|string—Vertical gap between wrapped rows
columnGap'xs'|'sm'|'md'|'lg'|'xl'|string—Horizontal gap between columns
align'stretch'|'center'|'flex-start'|'flex-end'|'baseline'—Cross-axis alignment of children
justify'flex-start'|'flex-end'|'center'|'space-between'|'space-around'|'space-evenly'—Main-axis distribution of children
direction'row'|'row-reverse'|'column'|'column-reverse'—Direction of the main flex axis
wrap'wrap'|'nowrap'|'wrap-reverse'—Controls whether children wrap
componentstring'div'HTML element to render as root
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Children arranged by the flex container