Flex
Extends View. Renders as a <div> with display: flex and flex-direction: column by default.
All View props are inherited - including gap (resolves from theme.space). Flex adds the full set of CSS Flexbox layout props.
Examples
Column
A
B
C
<Flex
flexDirection="column"
gap={2}
p={2}
width="360px"
height="280px"
borderRadius="sm"
bg="secondary"
/>
Row
A
B
C
<Flex
flexDirection="row"
gap={2}
p={2}
width="360px"
height="280px"
borderRadius="sm"
bg="secondary"
/>
Justify Center
A
B
C
<Flex
flexDirection="row"
justifyContent="center"
alignItems="center"
gap={2}
p={2}
width="360px"
height="100px"
borderRadius="sm"
bg="secondary"
/>
Space Between
A
B
C
<Flex
flexDirection="row"
justifyContent="space-between"
alignItems="center"
gap={2}
p={2}
width="360px"
height="280px"
borderRadius="sm"
bg="secondary"
/>
Wrap
1
2
3
4
5
6
7
8
9
const args: Partial<FlexProps> = {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 2,
p: 2,
width: '360px',
height: 'auto',
borderRadius: 'sm',
bg: 'secondary',
}
<Flex {...args}>
{Array.from({ length: 9 }, (_, i) => (
<View key={i} p={2} bg="primary" borderRadius="sm" width="100px">
{i + 1}
</View>
))}
</Flex>