1. Primitives
  2. Flex

<Flex />

The <Flex /> component is a wrapper component for layout primitives.
<Flex padding={4}>
<Card flex={1}>
<Text size={[2, 2, 3, 4]}>hello</Text>
</Card>
<Card flex={[1, 2, 3]} marginLeft={[2, 2, 3, 4]}>
<Text size={[2, 2, 3, 4]}>world</Text>
</Card>
</Flex>

Properties  

as?: React.ElementType | keyof JSX.IntrinsicElements
align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
direction: 'row' | 'row-reverse' | 'column' | 'column-reverse'
flex?: number | number[]
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
wrap?: 'wrap' | 'wrap-reverse' | 'nowrap'
Made withby folks at