Flex

Styled system prop names
m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, width, fontSize, color, bg, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, ratio, verticalAlign, alignItems, justifyContent, flexWrap, flexDirection, flex, alignContent, justifyItems, justifySelf, alignSelf, order, flexBasis, gridGap, gridRowGap, gridColumnGap, gridColumn, gridRow, gridArea, gridAutoFlow, gridAutoRows, gridAutoColumns, gridTemplateRows, gridTemplateColumns, gridTemplateAreas, background, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, borderRadius, borderColor, border, borderTop, borderRight, borderBottom, borderLeft, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left

The Flex is an element, used as a Box wrapper to combine them in one single row.

Examples:

Box 1

Box 2

Box 3

<Flex>
  <Box bg="brand" display="flex" alignItems="flex-end">
    <Text m={0}>Box 1</Text>
  </Box>
  <Box bg="cta" width="150px" height="150px" display="flex" alignItems="center" justifyContent="center">
    <Text m={0} textAlign="center" bg="brand">Box 2</Text>
  </Box>
  <Box>
    <Text m={0} bg="black" color="white">Box 3</Text>
  </Box>
</Flex>