Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Chakra

/

Layout

/

Wrap

Wrap is a layout component that adds a defined space between its children.

It wraps its children automatically if there isn't enough space to fit any more in the same row. Think of it as a smarter flex-wrap with spacing support.

  • Example
  • Example
  • Example
  • Example
rx.chakra.wrap(
    rx.chakra.wrap_item(
        rx.chakra.box(
            "Example", bg="lightgreen", w="100px", h="80px"
        )
    ),
    rx.chakra.wrap_item(
        rx.chakra.box(
            "Example", bg="lightblue", w="200px", h="80px"
        )
    ),
    rx.chakra.wrap_item(
        rx.chakra.box(
            "Example", bg="red", w="300px", h="80px"
        )
    ),
    rx.chakra.wrap_item(
        rx.chakra.box(
            "Example", bg="orange", w="400px", h="80px"
        )
    ),
    width="100%",
    spacing="2em",
    align="center",
)

Layout component used to add space between elements and wrap automatically if there isn't enough space.

PropTypeDescriptionValues
alignstr

How to align the items.

directionstr

The flex direction of the wrap.

justifystr

How to justify the items.

should_wrap_childrenbool

Whether to wrap children in rx.wrap_item.

spacingstr

The spacing between the items.

spacing_xstr

The horizontal spacing between the items.

spacing_ystr

The vertical spacing between the items.

Event Triggers

See the full list of default event triggers

Item of the Wrap component.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting