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

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Flex

Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.
Center
Square
Box
rx.flex(
    rx.center("Center", bg="lightblue"),
    rx.square("Square", bg="lightgreen", padding=10),
    rx.box("Box", bg="salmon", width="150px"),
)
Combining flex with spacer allows for stackable and responsive components.
Center
Square
Box
rx.flex(
    rx.center("Center", bg="lightblue"),
    rx.spacer(),
    rx.square("Square", bg="lightgreen", padding=10),
    rx.spacer(),
    rx.box("Box", bg="salmon", width="150px"),
    width="100%",
)

Flex

A reflexive container component.

  • Base Event Triggers

← ContainerForeach →

Copyright © 2023 Pynecone, Inc.