Flex and Flex.Item

Flex and Flex.Item are wrapping components that will give the content flexbox properties. Flex.Item is included in the export for Flex.

Default example

Item 1
Item 2
Item 3
<BorderBox width={{sm: '100%', lg: 300}} height={200} borderRadius={0}>
  <Flex height='100%' flexWrap="nowrap">
    <Flex.Item bg='yellow.5' p={2}>
      Item 1
    </Flex.Item>
    <Flex.Item bg='gray.3' p={2}>
      Item 2
    </Flex.Item>
    <Flex.Item bg='blue.5' p={2}>
      Item 3
    </Flex.Item>
  </Flex>
</BorderBox>

Various flex props

Flex Direction - Column

Item 1
Item 2
Item 3
<Flex
  flexWrap="nowrap"
  flexDirection="column"
>
  <Flex.Item bg='yellow.5' p={2}>
    Item 1
  </Flex.Item>
  <Flex.Item bg='gray.3' p={2}>
    Item 2
  </Flex.Item>
  <Flex.Item bg='blue.5' p={2}>
    Item 3
  </Flex.Item>
</Flex>

System props

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

Flex.Item components get FLEX_ITEM, COMMON, and LAYOUT system props.

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

Component props

Flex and Flex.Item do not get any additional props other than the system props mentioned above.