The Flex component behaves the same as the Box component except that it has display: flex set by default.

Previously, a Flex.Item component was used for flex item specific properties; Box now contains all those properties and should be used in its place.

Default example

<BorderBox width={300} height={300} borderRadius={0}>
  <Flex flexWrap="nowrap">
    <Box p={3} bg="blue.5">
      Item 1
    </Box>
    <Box p={3} bg="green.5">
      Item 2
    </Box>
    <Box p={3} bg="yellow.5">
      Item 3
    </Box>
  </Flex>
</BorderBox>

System props

Flex components get FLEX, COMMON, and LAYOUT system props.

Read our System Props doc page for a full list of available props.

Component props

Flex does not get any additional props other than the system props mentioned above.

Edit this page on GitHub

2 contributors

Last edited by BinaryMuse on April 17, 2020