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

    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

    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.

    Edit this page on GitHub