Flex Wrap

Atomic props for controlling how flex items wrap.

Atomic Props	CSS Properties
flexWrap={value}	flex-wrap: {value}

Wrap

Use flexWrap="wrap" props to allow flex items to wrap.

Result

Loading...

Live Editor

<Box spaceX3 row flexWrap="wrap"> <Box bgOrange400 m2 p4 w-300></Box> <Box bgOrange500 m2 p4 w-300></Box> <Box bgOrange400 m2 p4 w-300></Box> </Box>

<Box spaceX3 row flexWrap="wrap">
  <Box bgOrange400 m2 p4 w-300></Box>
  <Box bgOrange500 m2 p4 w-300></Box>
  <Box bgOrange400 m2 p4 w-300></Box>
</Box>

No Wrap

Use flexWrap="nowrap" props to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.

Result

Loading...

Live Editor

<Box spaceX3 row flexWrap="nowrap"> <Box bgOrange400 m2 p4 w-300></Box> <Box bgOrange500 m2 p4 w-300></Box> <Box bgOrange400 m2 p4 w-300></Box> </Box>

<Box spaceX3 row flexWrap="nowrap">
  <Box bgOrange400 m2 p4 w-300></Box>
  <Box bgOrange500 m2 p4 w-300></Box>
  <Box bgOrange400 m2 p4 w-300></Box>
</Box>