The `align-items` value (for main axis alignment)
Wrap
Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.
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.
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.