The `align-items` value (for main axis alignment)
Wrap
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 more in the same row.
Think of it as a smarter flex-wrap with spacing support. It works really
well with things like dialog buttons, tags, and chips.
Import#
import { Wrap, WrapItem } from "@chakra-ui/react"
- Wrap: Wrap composes the
Boxcomponent and renders a<ul>tag - WrapItem: WrapItem composes the
Boxcomponent and renders the HTML<li>tag
Usage#
In the example below, you see that the last Box wrapped to the next line.
- Box 1
- Box 2
- Box 3
- Box 4
Editable Example
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.
- Box 1
- Box 2
- Box 3
- Box 4
- Box 5
Editable Example
Change the alignment#
Pass the align prop to change the alignment of the child along the cross axis.
- Box 1
- Box 2
- Box 3
- Box 4
- Box 5
Editable Example
Pass the justify prop to change the alignment of the child along the main
axis.
- Box 1
- Box 2
- Box 3
- Box 4
- Box 5
Editable Example
Props#
Wrap Props#
Wrap extends Box, so you can pass all Box props in addition to these:
align
alignDescription
Type
SystemProps["alignItems"]direction
directionDescription
The `flex-direction` value
Type
SystemProps["flexDirection"]justify
justifyDescription
The `justify-content` value (for cross-axis alignment)
Type
SystemProps["justifyContent"]shouldWrapChildren
shouldWrapChildrenDescription
If true, the children will be wrapped in a WrapItem
Type
booleanspacing
spacingDescription
The space between the each child (even if it wraps)
Type
SystemProps["margin"]WrapItem Props#
WrapItem composes the Box component.