Flex

Use the Flex component to create flexbox layouts.

import { Flex } from 'theme-ui'

<Flex>
  <Box sx={{ p: 2, bg: 'primary', color: 'white', flex: '1 1 auto' }}>Flex</Box>
  <Box sx={{ p: 2, bg: 'muted' }}>Box</Box>
</Flex>
<Flex>
  <Box sx={{ p: 2, bg: 'primary', color: 'white', flex: '1 1 auto' }}>Flex</Box>
  <Box sx={{ p: 2, bg: 'muted' }}>Box</Box>
</Flex>