Extends `Box` with helper props to manage flex layouts

```jsx
<Flex>
  <Box p={4} bg="grey-light" flex={1} text="center">
    1
  </Box>
  <Box p={4} bg="grey" flex={1} text="center">
    2
  </Box>
</Flex>
```

Can set the direction by using the `col` prop

```jsx
<Flex col>
  <Box p={4} bg="grey-light" text="center">
    1
  </Box>
  <Box p={4} bg="grey" text="center">
    2
  </Box>
</Flex>
```

Can switch the order using `reverse`

```jsx
<Flex reverse m={{b: 4}}>
  <Box p={4} bg="grey-light" flex={1} text="center">1</Box>
  <Box p={4} bg="grey" flex={1} text="center">2</Box>
</Flex>

<Flex col reverse>
  <Box p={4} bg="grey-light" text="center">1</Box>
  <Box p={4} bg="grey" text="center">2</Box>
</Flex>
```

Use `wrap` or `wrapReverse` to control how overflow content is handled

```jsx
<Flex wrap m={{b: 4}}>
  <Box p={4} w="2/5" bg="grey-light" text="center">
    1
  </Box>
  <Box p={4} w="2/5" bg="grey" text="center">
    2
  </Box>
  <Box p={4} w="2/5" bg="grey-dark" text="center">
    3
  </Box>
</Flex>

<Flex wrapReverse>
  <Box p={4} w="2/5" bg="grey-light" text="center">
    1
  </Box>
  <Box p={4} w="2/5" bg="grey" text="center">
    2
  </Box>
  <Box p={4} w="2/5" bg="grey-dark" text="center">
    3
  </Box>
</Flex>
```