Flex Component
The Flex component is a flexible box layout component for building responsive layouts in your application.
Props
The Flex component accepts the following props:
| Prop | Description | Type |
|---|---|---|
dir | A string that sets the direction of the Flex container. | String |
direction | A string that sets the direction of the Flex container. | String |
wrap | A string that sets the wrap property of the Flex container. | String |
justify | A string that sets the justify-content property of the Flex container. | String |
items | A string that sets the align-items property of the Flex container. | String |
content | A string that sets the align-content property of the Flex container. | String |
gap | A string that sets the gap between Flex items. | String |
gapX | A string that sets the horizontal gap between Flex items. | String |
gapY | A string that sets the vertical gap between Flex items. | String |
flex | A string that sets the flex property of the Flex container. | String |
radius | A string that sets the border radius of the Flex container. | String |
bg | A string that sets the background color of the Flex container. | String |
backgroundColor | A string that sets the background color of the Flex container. | String |
w | A string that sets the width of the Flex container. | String |
h | A string that sets the height of the Flex container. | String |
width | A string that sets the width of the Flex container. | String |
height | A string that sets the height of the Flex container. | String |
p | A string that sets the padding of the Flex container. | String |
pt | A string that sets the top padding of the Flex container. | String |
pr | A string that sets the right padding of the Flex container. | String |
pb | A string that sets the bottom padding of the Flex container. | String |
pl | A string that sets the left padding of the Flex container. | String |
px | A string that sets the horizontal padding of the Flex container. | String |
py | A string that sets the vertical padding of the Flex container. | String |
padding | A string that sets the padding of the Flex container. | String |
m | A string that sets the margin of the Flex container. | String |
mt | A string that sets the top margin of the Flex container. | String |
mb | A string that sets the bottom margin of the Flex container. | String |
mr | A string that sets the right margin of the Flex container. | String |
ml | A string that sets the left margin of the Flex container. | String |
mx | A string that sets the horizontal margin of the Flex container. | String |
my | A string that sets the vertical margin of the Flex container. | String |
margin | A string that sets the margin of the Flex container. | String |
Usage
<Flex
dir="row"
wrap="wrap"
justify="center"
items="start"
content="start"
gap="2"
radius="md"
bg="primary"
w="full"
h="full"
p="4"
m="2"
>
<Button>Item 1</Button>
<Button>Item 2</Button>
<Button>Item 3</Button>
</Flex>Examples
Column
Column with gap
Column with align items
Start
End
Center
Column with justify content
Start
End
Center
Column with align content
Start
Row
Row with gap
Row with align items
Start
End
Center
Row with justify content
Start
End
Center
Row with align content
For content to work the container of the element must be a flex container and flex wrap must be set to wrap.