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.


Box 1

Box 2

Box 3

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