Wrap Wrap is a layout component that adds a defined space between its children and
'wraps' its children automatically if there's not enough space to fit any child.
Think of it as a smarter flex-wrap with spacing support. It works really well
with things like dialog buttons, tags, and chips.
import { Wrap } from "@chakra-ui/core"
In the example, you see that the last Box wrapped to the next line.
< Wrap >
< Center w = " 180px " h = " 80px " bg = " red.200 " >
Box 1
</ Center >
< Center w = " 180px " h = " 80px " bg = " green.200 " >
Box 2
</ Center >
< Center w = " 180px " h = " 80px " bg = " tomato " >
Box 3
</ Center >
< Center w = " 180px " h = " 80px " bg = " blue.200 " >
Box 4
</ Center >
</ Wrap >
copy Editable Example
Pass the spacing prop to apply consistent spacing between each child, even
if it wraps.
Pro Tip: You can pass responsive values for the spacing.
Box 1
Box 2
Box 3
Box 4
Box 5
< Wrap spacing = " 30px " >
< Center w = " 180px " h = " 80px " bg = " red.200 " >
Box 1
</ Center >
< Center w = " 180px " h = " 80px " bg = " green.200 " >
Box 2
</ Center >
< Center w = " 180px " h = " 80px " bg = " tomato " >
Box 3
</ Center >
< Center w = " 180px " h = " 80px " bg = " blue.200 " >
Box 4
</ Center >
< Center w = " 180px " h = " 80px " bg = " blackAlpha.500 " >
Box 5
</ Center >
</ Wrap >
copy Editable Example
Pass the align prop to change the alignment of the child along the main axis.
Box 1
Box 2
Box 3
Box 4
Box 5
< Wrap spacing = " 30px " align = " center " >
< Center w = " 180px " h = " 80px " bg = " red.200 " >
Box 1
</ Center >
< Center w = " 180px " h = " 40px " bg = " green.200 " >
Box 2
</ Center >
< Center w = " 120px " h = " 80px " bg = " tomato " >
Box 3
</ Center >
< Center w = " 180px " h = " 40px " bg = " blue.200 " >
Box 4
</ Center >
< Center w = " 180px " h = " 80px " bg = " whiteAlpha.500 " >
Box 5
</ Center >
</ Wrap >
copy Editable Example
Pass the justify prop to change the alignment of the child along the cross
axis.
Box 1
Box 2
Box 3
Box 4
Box 5
< Wrap spacing = " 30px " justify = " center " >
< Center w = " 180px " h = " 80px " bg = " red.200 " >
Box 1
</ Center >
< Center w = " 180px " h = " 80px " bg = " green.200 " >
Box 2
</ Center >
< Center w = " 120px " h = " 80px " bg = " tomato " >
Box 3
</ Center >
< Center w = " 180px " h = " 80px " bg = " blue.200 " >
Box 4
</ Center >
< Center w = " 180px " h = " 80px " bg = " whiteAlpha.500 " >
Box 5
</ Center >
</ Wrap >
copy Editable Example
Wrap extends Box, so you can pass all BoxProps in addition to these:
Name Type Default Description spacing Responsive(string or number)0.5remThe space between each child (even if it wraps) justify FlexProps['justifyContent']The justify-content value (for cross axis alignment) align FlexProps['alignItems']The align-items value (for main axis alignment) direction FlexProps['flexDirection']The flex-direction value
Previous
Next
Layout