Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Layout

/

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

Combining flex with spacer allows for stackable and responsive components.

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

A reflexive container component.

PropTypeDescriptionValues
alignstr

How to align items in the flex.

basisstr

Shorthand for flexBasis style prop

directionUnion

Shorthand for flexDirection style prop

growstr

Shorthand for flexGrow style prop

justifystr

The way to justify the items.

wrapUnion

Shorthand for flexWrap style prop

shrinkstr

Shorthand for flexShrink style prop

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting