The Flex component is a light abstraction over Box that sets its rendering context to flex

Flex shares the same API as Box, so you can access as and css to apply the correct semantic element and contextually relevant styles.

<Flex css={{ justifyContent: 'space-between', width: '100%' }}>
<Box css={{ bg: '$primary', size: '$6' }} />
<Box css={{ bg: '$primary', size: '$6' }} />
<Box css={{ bg: '$primary', size: '$6' }} />
</Flex>

API Reference

PropTypeDefaultRequired
asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-