Flex

Box Props

Because Flex composes the Box component, it accepts any of Box's props.

A
B
C
<div>
  {/* You can apply Box props directly to Flex: */}
  <Flex as="header" padding="lg" width={1/2}>
    <FlexItem>A</FlexItem>
    <FlexItem>B</FlexItem>
    <FlexItem>C</FlexItem>
  </Flex>

  {/* Don't wrap Flex in a Box to apply spacing/sizing props:
    <Box padding="lg" width={1/2}>
      <Flex>
        <FlexItem>A</FlexItem>
        <FlexItem>B</FlexItem>
        <FlexItem>C</FlexItem>
      </Flex>
    </Box>
  */}
</div>