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
ResponsiveValue<AlignItems>

direction

Description

The `flex-direction` value

Type
ResponsiveValue<FlexDirection>

justify

Description

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

Type
ResponsiveValue<JustifyContent>

shouldWrapChildren

Description

If true, the children will be wrapped in a WrapItem

Type
boolean
Default
false

spacing

Description

The space between each child (even if it wraps)

Type
ResponsiveValue<string | number | (string & {})>

spacingX

Description

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

Type
ResponsiveValue<string | number | (string & {})>

spacingY

Description

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

Type
ResponsiveValue<string | number | (string & {})>

WrapItem Props#

WrapItem composes the Box component.

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel