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
alignSystemProps["alignItems"]direction
directionThe `flex-direction` value
SystemProps["flexDirection"]justify
justifyThe `justify-content` value (for cross-axis alignment)
SystemProps["justifyContent"]shouldWrapChildren
shouldWrapChildrenIf true, the children will be wrapped in a WrapItem
booleanspacing
spacingThe space between each child (even if it wraps)
SystemProps["margin"]spacingX
spacingXThe horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.
SystemProps["margin"]spacingY
spacingYThe 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
alignThe `align-items` value (for main axis alignment)
SystemProps["alignItems"]direction
directionThe `flex-direction` value
SystemProps["flexDirection"]justify
justifyThe `justify-content` value (for cross-axis alignment)
SystemProps["justifyContent"]shouldWrapChildren
shouldWrapChildrenIf true, the children will be wrapped in a WrapItem
booleanspacing
spacingThe space between each child (even if it wraps)
SystemProps["margin"]spacingX
spacingXThe horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.
SystemProps["margin"]spacingY
spacingYThe 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.