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>