Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Layout

/

Stack

Below are two examples the different types of stack components vstack and hstack for ordering items on a page.

Example
Example
Example
Example
Example
rx.chakra.hstack(
    rx.chakra.box(
        "Example", bg="red", border_radius="md", width="10%"
    ),
    rx.chakra.box(
        "Example",
        bg="orange",
        border_radius="md",
        width="10%",
    ),
    rx.chakra.box(
        "Example",
        bg="yellow",
        border_radius="md",
        width="10%",
    ),
    rx.chakra.box(
        "Example",
        bg="lightblue",
        border_radius="md",
        width="10%",
    ),
    rx.chakra.box(
        "Example",
        bg="lightgreen",
        border_radius="md",
        width="60%",
    ),
    width="100%",
)
Example
Example
Example
Example
Example
rx.chakra.vstack(
    rx.chakra.box(
        "Example", bg="red", border_radius="md", width="20%"
    ),
    rx.chakra.box(
        "Example",
        bg="orange",
        border_radius="md",
        width="40%",
    ),
    rx.chakra.box(
        "Example",
        bg="yellow",
        border_radius="md",
        width="60%",
    ),
    rx.chakra.box(
        "Example",
        bg="lightblue",
        border_radius="md",
        width="80%",
    ),
    rx.chakra.box(
        "Example",
        bg="lightgreen",
        border_radius="md",
        width="100%",
    ),
    width="100%",
)

Container to stack elements with spacing.

PropTypeDescriptionValues
align_itemsstr

Shorthand for alignItems style prop

directionUnion

The direction to stack the items.

is_inlinebool

If true the items will be stacked horizontally.

justify_contentstr

Shorthand for justifyContent style prop

should_wrap_childrenbool

If true, the children will be wrapped in a Box, and the Box will take the spacing props

spacingstr

The space between each stack item

wrapstr

Shorthand for flexWrap style prop

justifystr

Alignment of contents.

Event Triggers

See the full list of default event triggers

Stack items horizontally.

PropTypeDescriptionValues
align_itemsstr

Shorthand for alignItems style prop

directionUnion

The direction to stack the items.

is_inlinebool

If true the items will be stacked horizontally.

justify_contentstr

Shorthand for justifyContent style prop

should_wrap_childrenbool

If true, the children will be wrapped in a Box, and the Box will take the spacing props

spacingstr

The space between each stack item

wrapstr

Shorthand for flexWrap style prop

justifystr

Alignment of contents.

Stack items vertically.

PropTypeDescriptionValues
align_itemsstr

Shorthand for alignItems style prop

directionUnion

The direction to stack the items.

is_inlinebool

If true the items will be stacked horizontally.

justify_contentstr

Shorthand for justifyContent style prop

should_wrap_childrenbool

If true, the children will be wrapped in a Box, and the Box will take the spacing props

spacingstr

The space between each stack item

wrapstr

Shorthand for flexWrap style prop

justifystr

Alignment of contents.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting