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
alignDescription
Type
ResponsiveValue<AlignItems>direction
directionDescription
The `flex-direction` value
Type
ResponsiveValue<FlexDirection>justify
justifyDescription
The `justify-content` value (for cross-axis alignment)
Type
ResponsiveValue<JustifyContent>shouldWrapChildren
shouldWrapChildrenDescription
If true, the children will be wrapped in a WrapItem
Type
booleanDefault
falsespacing
spacingDescription
The space between each child (even if it wraps)
Type
ResponsiveValue<string | number | (string & {})>spacingX
spacingXDescription
The horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.
Type
ResponsiveValue<string | number | (string & {})>spacingY
spacingYDescription
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.
Props#
Wrap Props#
Wrap extends Box, so you can pass all Box props in addition to these:
align
alignDescription
The `align-items` value (for main axis alignment)
Type
ResponsiveValue<AlignItems>direction
directionDescription
The `flex-direction` value
Type
ResponsiveValue<FlexDirection>justify
justifyDescription
The `justify-content` value (for cross-axis alignment)
Type
ResponsiveValue<JustifyContent>shouldWrapChildren
shouldWrapChildrenDescription
If true, the children will be wrapped in a WrapItem
Type
booleanDefault
falsespacing
spacingDescription
The space between each child (even if it wraps)
Type
ResponsiveValue<string | number | (string & {})>spacingX
spacingXDescription
The horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.
Type
ResponsiveValue<string | number | (string & {})>spacingY
spacingYDescription
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.