Wrap

Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.

    Source@chakra-ui/layout

Props#

Wrap Props#

Wrap extends Box, so you can pass all Box props in addition to these:

align

Description

The `align-items` value (for main axis alignment)

Type
SystemProps["alignItems"]

direction

Description

The `flex-direction` value

Type
SystemProps["flexDirection"]

justify

Description

The `justify-content` value (for cross-axis alignment)

Type
SystemProps["justifyContent"]

shouldWrapChildren

Description

If true, the children will be wrapped in a WrapItem

Type
boolean

spacing

Description

The space between each child (even if it wraps)

Type
SystemProps["margin"]

spacingX

Description

The horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.

Type
SystemProps["margin"]

spacingY

Description

The vertical space between the each child (even if it wraps). Defaults to spacing if not defined.

Type
SystemProps["margin"]

WrapItem Props#

WrapItem composes the Box component.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel