Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Layout

/

Flex

The Flex component is used to make flexbox layouts. It makes it simple to arrange child components in horizontal or vertical directions, apply wrapping, justify and align content, and automatically size components based on available space, making it ideal for building responsive layouts.

By default, children are arranged horizontally (direction="row") without wrapping.

Card 1
Card 2
Card 3
Card 4
Card 5
rx.flex(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    rx.card("Card 5"),
    spacing="2",
    width="100%",
)

With flex_wrap="wrap", the children will wrap to the next line instead of being resized.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
rx.flex(
    rx.foreach(
        rx.Var.range(10),
        lambda i: rx.card(f"Card {i + 1}", width="16%"),
    ),
    spacing="2",
    flex_wrap="wrap",
    width="100%",
)

With direction="column", the children will be arranged vertically.

Card 1
Card 2
Card 3
Card 4
rx.flex(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    spacing="2",
    direction="column",
)

Two props control how children are aligned within the Flex component:

  • align controls how children are aligned along the cross axis (vertical for row and horizontal for column).
  • justify controls how children are aligned along the main axis (horizontal for row and vertical for column).

The following example visually demonstrates the effect of these props with different wrap and direction values.

Wrap

Direction

Align

Justify

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
class FlexPlaygroundState(rx.State):
    align: str = "stretch"
    justify: str = "start"
    direction: str = "row"
    wrap: str = "nowrap"


def select(label, items, value, on_change):
    return rx.flex(
        rx.text(label),
        rx.select.root(
            rx.select.trigger(),
            rx.select.content(
                *[
                    rx.select.item(item, value=item)
                    for item in items
                ]
            ),
            value=value,
            on_change=on_change,
        ),
        align="center",
        justify="center",
        direction="column",
    )


def selectors():
    return rx.flex(
        select(
            "Wrap",
            ["nowrap", "wrap", "wrap-reverse"],
            FlexPlaygroundState.wrap,
            FlexPlaygroundState.set_wrap,
        ),
        select(
            "Direction",
            [
                "row",
                "column",
                "row-reverse",
                "column-reverse",
            ],
            FlexPlaygroundState.direction,
            FlexPlaygroundState.set_direction,
        ),
        select(
            "Align",
            [
                "start",
                "center",
                "end",
                "baseline",
                "stretch",
            ],
            FlexPlaygroundState.align,
            FlexPlaygroundState.set_align,
        ),
        select(
            "Justify",
            ["start", "center", "end", "between"],
            FlexPlaygroundState.justify,
            FlexPlaygroundState.set_justify,
        ),
        width="100%",
        spacing="2",
        justify="between",
    )


def example1():
    return rx.box(
        selectors(),
        rx.flex(
            rx.foreach(
                rx.Var.range(10),
                lambda i: rx.card(
                    f"Card {i + 1}", width="16%"
                ),
            ),
            spacing="2",
            direction=FlexPlaygroundState.direction,
            align=FlexPlaygroundState.align,
            justify=FlexPlaygroundState.justify,
            wrap=FlexPlaygroundState.wrap,
            width="100%",
            height="20vh",
            margin_top="16px",
        ),
        width="100%",
    )

When a child component is included in a flex container, the flex_grow (default "0") and flex_shrink (default "1") props control how the box is sized relative to other components in the same container.

The resizing always applies to the main axis of the flex container. If the direction is row, then the sizing applies to the width. If the direction is column, then the sizing applies to the height. To set the optimal size along the main axis, the flex_basis prop is used and may be either a percentage or CSS size units. When unspecified, the corresponding width or height value is used if set, otherwise the content size is used.

When flex_grow="0", the box will not grow beyond the flex_basis.

When flex_shrink="0", the box will not shrink to less than the flex_basis.

These props are used when creating flexible responsive layouts.

Move the slider below and see how adjusting the width of the flex container affects the computed sizes of the flex items based on the props that are set.

flex_shrink=0
flex_shrink=1
flex_grow=0
flex_grow=1
class FlexGrowShrinkState(rx.State):
    width_pct: list[int] = [100]


def border_box(*children, **props):
    return rx.box(
        *children,
        border="1px solid var(--gray-10)",
        border_radius="2px",
        **props,
    )


def example2():
    return rx.box(
        rx.flex(
            border_box(
                "flex_shrink=0",
                flex_shrink="0",
                width="100px",
            ),
            border_box(
                "flex_shrink=1",
                flex_shrink="1",
                width="200px",
            ),
            border_box("flex_grow=0", flex_grow="0"),
            border_box("flex_grow=1", flex_grow="1"),
            width=f"{FlexGrowShrinkState.width_pct}%",
            margin_bottom="16px",
            spacing="2",
        ),
        rx.slider(
            min=0,
            max=100,
            value=FlexGrowShrinkState.width_pct,
            on_change=FlexGrowShrinkState.set_width_pct,
        ),
        width="100%",
    )

Component for creating flex layouts.

Test
PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

directionLiteral

How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"

alignLiteral

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

justifyLiteral

Alignment of children along the cross axis: "start" | "center" | "end" | "between"

wrapLiteral

Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

spacingLiteral

Gap between children: "0" - "9"

Event Triggers

See the full list of default event triggers
← ContainerForeach →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting