Wrap is a layout component that adds a defined space between its children. It 'wraps' its children automatically if there isn't enough space to fit any child.
Think of it as a smarter
spacing support. It works really
well with things like dialog buttons, tags, and chips.
Boxcomponent and renders a
Boxcomponent and renders the HTML
In the example below, you see that the last
Box wrapped to the next line.
spacing prop to apply consistent spacing between each child, even if
Pro Tip: You can pass responsive values for the spacing.
align prop to change the alignment of the child along the main axis.
justify prop to change the alignment of the child along the cross
Box, so you can pass all
Box props in addition to these:
|align||The `align-items` value (for main axis alignment)||-|
|css||The emotion's css style object||-|
|direction||The `flex-direction` value||-|
|justify||The `justify-content` value (for cross-axis alignment)||-|
|spacing||The space between the each child (even if it wraps)||-|
WrapItem composes the Box component.