Flex

Prop nameTypeDefaultDescription
displaystringflex
Styled system prop names
margin, m, marginTop, mt, marginBottom, mb, marginLeft, ml, marginRight, mr, padding, p, paddingTop, pt, paddingBottom, pb, paddingLeft, pl, paddingRight, pr, width, fontSize, color, backgroundColor, bg, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, maxWidth, minWidth, height, maxHeight, minHeight, 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, border, borderTop, borderRight, borderBottom, borderLeft, borderWidth, borderStyle, borderColor, borderRadius, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left, textStyle, colors, variant. (reference table)

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

Box 1

Box 2

Box 3