Wrap
Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.
Import
import { Wrap, WrapItem } from "@chakra-ui/react";
- Wrap: Wrap composes the
Box
component and renders a<ul>
tag - WrapItem: WrapItem composes the
Box
component and renders the HTML<li>
tag
Usage
Think of Wrap
component as a flex box container with flex-wrap
and spacing
support. It works really well with things like dialog buttons, tags, and chips.
In the example below, you see that the last Box
wrapped to the next line.
Change the spacing
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.
Change the alignment
Pass the align
prop to change the alignment of the child along the cross axis.
Pass the justify
prop to change the alignment of the child along the main
axis.
Props
Wrap Props
Wrap extends Box
, so you can pass all Box
props in addition to these:
align
align
The `align-items` value (for main axis alignment)
SystemProps["alignItems"]
direction
direction
The `flex-direction` value
SystemProps["flexDirection"]
justify
justify
The `justify-content` value (for cross-axis alignment)
SystemProps["justifyContent"]
shouldWrapChildren
shouldWrapChildren
If true
, the children will be wrapped in a WrapItem
boolean
spacing
spacing
The space between each child (even if it wraps)
SystemProps["margin"]
spacingX
spacingX
The horizontal space between the each child (even if it wraps). Defaults to spacing
if not defined.
SystemProps["margin"]
spacingY
spacingY
The vertical space between the each child (even if it wraps). Defaults to spacing
if not defined.
SystemProps["margin"]
WrapItem Props
WrapItem composes the Box component.