pnpm dlx dreamy add flexFlex provides flexbox layout capabilities for creating responsive layouts. Use it to align and distribute space between items in a container.
1
2
3
<Flex color="white" w="full" h="100px">
<Flex center bg="green.400" w="100px" color='black/87'>
1
</Flex>
<Flex center bg="blue.400" w="1/3">
2
</Flex>
<Flex center bg="purple.400" flex={1}>
3
</Flex>
</Flex>Use the direction or flexDir prop to change the direction of the flex container.
0
1
2
<Flex direction="column" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex p={2} key={i} color="black/87" bg="green.400" w="full">
{i}
</Flex>
))}
</Flex>Use the align or alignItems prop to change the alignment of the flex items.
1
2
3
<Flex align="center" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex p={2} key={i} color="black/87" bg="green.400" w="100px" h="4" center>
{i}
</Flex>
))}
</Flex>Use the justify or justifyContent prop to change the justification of the flex items.
0
1
2
<Flex justify="center" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>Use the gap prop to change the gap between the flex items.
0
1
2
<Flex gap={10} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>Use the wrap prop to change the wrapping of the flex items.
0
1
2
3
4
5
6
7
8
9
Tip
Tip: You can use <Wrap /> component or use wrapped utility prop to set flexWrap to wrap.<Flex
wrap="wrap"
// or: wrapped
gap={4}
full
>
{Array.from({length: 10}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>