FlexItem

Flex Props

FlexItem can also be a Flex. Setting the flex prop to true will compose FlexItem from Flex, allowing it to accept any of Flex's props. This can reduce repetition when a layout requires nested flex containers and flexed items.

A
B
C
D
<Flex>
  <FlexItem flex alignItems="center" grow={1}>
    <FlexItem>A</FlexItem>
    <FlexItem>B</FlexItem>
  </FlexItem>
  <FlexItem>
    <Box>C</Box>
    <Box>D</Box>
  </FlexItem>
</Flex>