Flex

A responsive flex container component for vertical stacking with customizable gaps.

API reference

Prop	Type	Default	Responsive
align	startcenterendbaselinestretch	-	Yes
direction	rowcolumnrow-reversecolumn-reverse	-	Yes
justify	startcenterendbetween	-	Yes
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

The grid component also accepts all the spacing props from the Box component.

Prop	Type	Default	Responsive
p	0.511.5234567891011121314string	-	Yes
px	0.511.5234567891011121314string	-	Yes
py	0.511.5234567891011121314string	-	Yes
pt	0.511.5234567891011121314string	-	Yes
pr	0.511.5234567891011121314string	-	Yes
pb	0.511.5234567891011121314string	-	Yes
pl	0.511.5234567891011121314string	-	Yes
m	0.511.5234567891011121314string	-	Yes
mx	0.511.5234567891011121314string	-	Yes
my	0.511.5234567891011121314string	-	Yes
mt	0.511.5234567891011121314string	-	Yes
mr	0.511.5234567891011121314string	-	Yes
mb	0.511.5234567891011121314string	-	Yes
ml	0.511.5234567891011121314string	-	Yes

A simple example of how to use the Flex component.

<Flex gap="md">
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

The Flex component also supports responsive values, making it easy to create responsive designs.

<Flex gap={{ xs: 'xs', md: 'md' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

The Flex component also supports responsive alignment, making it easy to create responsive designs.

<Flex align={{ xs: 'start', md: 'center' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>