Reflex | Wrap

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

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.wrap(
    rx.wrap_item(
        rx.box(
            "Example", bg="lightgreen", w="100px", h="80px"
        )
    ),
    rx.wrap_item(
        rx.box(
            "Example", bg="lightblue", w="200px", h="80px"
        )
    ),
    rx.wrap_item(
        rx.box("Example", bg="red", w="300px", h="80px")
    ),
    rx.wrap_item(
        rx.box("Example", bg="orange", w="400px", h="80px")
    ),
    width="100%",
    spacing="2em",
    align="center",
)

Wrap

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

Props

Prop	Type	Description
`align`	str	How to align the items.
`direction`	str	The flex direction of the wrap.
`justify`	str	How to justify the items.
`should_wrap_children`	bool	Whether to wrap children in `rx.wrap_item` .
`spacing`	str	The spacing between the items.
`spacing_x`	str	The horizontal spacing between the items.
`spacing_y`	str	The vertical spacing between the items.

Base Event Triggers

WrapItem

Item of the Wrap component.

No props for WrapItem.

Base Event Triggers

← Stack AspectRatio →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Wrap

Wrap

Props

Base Event Triggers

WrapItem

No props for WrapItem.

Base Event Triggers

[ Learn ]