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
Box
component and renders a<ul>
tag - WrapItem: WrapItem composes the
Box
component and renders the HTML<li>
tag
Usage#
In the example below, you see that the last Box
wrapped to the next line.
<Wrap><WrapItem><Center w='180px' h='80px' bg='red.200'>Box 1</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='green.200'>Box 2</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='tomato'>Box 3</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blue.200'>Box 4</Center></WrapItem></Wrap>
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.
<Wrap spacing='30px'><WrapItem><Center w='180px' h='80px' bg='red.200'>Box 1</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='green.200'>Box 2</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='tomato'>Box 3</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blue.200'>Box 4</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blackAlpha.500'>Box 5</Center></WrapItem></Wrap>
Change the alignment#
Pass the align
prop to change the alignment of the child along the cross axis.
<Wrap spacing='30px' align='center'><WrapItem><Center w='180px' h='80px' bg='red.200'>Box 1</Center></WrapItem><WrapItem><Center w='180px' h='40px' bg='green.200'>Box 2</Center></WrapItem><WrapItem><Center w='120px' h='80px' bg='tomato'>Box 3</Center></WrapItem><WrapItem><Center w='180px' h='40px' bg='blue.200'>Box 4</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blackAlpha.500'>Box 5</Center></WrapItem></Wrap>
Pass the justify
prop to change the alignment of the child along the main
axis.
<Wrap spacing='30px' justify='center'><WrapItem><Center w='180px' h='80px' bg='red.200'>Box 1</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='green.200'>Box 2</Center></WrapItem><WrapItem><Center w='120px' h='80px' bg='tomato'>Box 3</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blue.200'>Box 4</Center></WrapItem><WrapItem><Center w='180px' h='80px' bg='blackAlpha.500'>Box 5</Center></WrapItem></Wrap>
Props#
Wrap Props#
Wrap extends Box
, so you can pass all Box
props in addition to these:
align
align
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.