28 lines
784 B
Markdown
28 lines
784 B
Markdown
---
|
|
components:
|
|
- rx.chakra.Wrap
|
|
- rx.chakra.WrapItem
|
|
---
|
|
|
|
# Wrap
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
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.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|