SOROUSH.DESIGN
Design SystemMarkdownStyled System

Flex

Extends View. Renders as a <div> with display: flex and flex-direction: column by default.

Source

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>