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
rc.flex(
    rc.center("Center", bg="lightblue"),
    rc.square("Square", bg="lightgreen", padding=10),
    rc.box("Box", bg="salmon", width="150px"),
)

Combining flex with spacer allows for stackable and responsive components.

Center
Square
Box
rc.flex(
    rc.center("Center", bg="lightblue"),
    rc.spacer(),
    rc.square("Square", bg="lightgreen", padding=10),
    rc.spacer(),
    rc.box("Box", bg="salmon", width="150px"),
    width="100%",
)

rc.Flex

A reflexive container component.

PropType | ValuesDefault
align
str
basis
str
direction
Union[str, List]
grow
str
justify
str
wrap
Union[str, List]
shrink
str

Event Triggers

See the full list of default event triggers