Flex

Responsive flexbox layout component

Flex

Box

<Flex>
  <Box
    p={3}
    width={1/2}
    color='white'
    bg='primary'>
    Flex
  </Box>
  <Box
    p={3}
    width={1/2}
    color='white'
    bg='secondary'>
    Box
  </Box>
</Flex>

<Flex>
  <Box
    p={3}
    width={1/2}
    color='white'
    bg='primary'>
    Flex
  </Box>
  <Box
    p={3}
    width={1/2}
    color='white'
    bg='secondary'>
    Box
  </Box>
</Flex>

Live Demo

The Box and Flex components are also available in the standalone Reflexbox package.