ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Layout

Spacer

rx.spacer

Official docs

Workshop order

Put the logo on the left of the header and the login button at the far right.

rx.spacer is an empty slot that takes up all the leftover space inside a Flex. Slip it between children and it pushes its neighbors apart, so use it when some things belong on the left and others at the far right. With several Spacers, they share the leftover space equally.

Example

rx.flex(
    rx.center(rx.text("Example"), bg="lightblue", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="lightgreen", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="salmon", padding="4px 8px"),
    width="100%",
)

Moving the Spacer around

A Spacer has no look of its own, so instead of a props lab, let's see how the result changes depending on where you put it. Pick a spot for the Spacer below. Put one at each end, as in start + end, and the items gather in the middle.

class SpacerPlaceState(rx.State):
    place: str = "middle"

    @rx.event
    def set_place(self, value: str):
        self.place = value


rx.vstack(
    rx.select(
        ["none", "start", "middle", "end", "start + end"],
        value=SpacerPlaceState.place,
        on_change=SpacerPlaceState.set_place,
    ),
    rx.flex(
        rx.cond((SpacerPlaceState.place == "start") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        rx.badge("A", size="3"),
        rx.cond(SpacerPlaceState.place == "middle", rx.spacer()),
        rx.badge("B", size="3"),
        rx.cond((SpacerPlaceState.place == "end") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        spacing="2",
        width="100%",
        padding="8px",
        border="1px dashed var(--gray-7)",
    ),
    width="100%",
)

Prop	Values	Default	Use
(style) `flex`	`1`	set by Reflex	Takes up leftover space. Several share it equally
(style) `align_self` `justify_self`	`"stretch"`	set by Reflex	Also stretches along the cross axis
`direction` `align` `justify` `wrap` `spacing` `as_child`	same as Flex	none	Accepted because it is built on Flex, but rarely useful on an empty slot

A Spacer only takes up space when its parent is a Flex-family component (rx.flex, rx.hstack, rx.vstack, rx.stack). Inside rx.box it does nothing.

Inside stacks, and vertically

stack, vstack and hstack are all built on Flex, so Spacer works in them as is. In the vertical direction (vstack) it divides the height. In the menu on the left, the Spacer pushes 'Log out' down to the bottom. Vertically, the parent needs a height for there to be leftover space.

Home

Orders

Log out

Left

Right

rx.flex(
    rx.vstack(
        rx.text("Menu", weight="bold"),
        rx.text("Home"),
        rx.text("Orders"),
        rx.spacer(),
        rx.text("Log out", color="var(--red-11)"),
        height="14rem",
        padding="12px",
        background_color="var(--gray-3)",
        width="140px",
    ),
    rx.hstack(
        rx.badge("Left"),
        rx.spacer(),
        rx.badge("Right"),
        width="100%",
        padding="12px",
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

Compared with justify="between"

You can also spread children to both ends with justify="between". The difference: between spaces out every child evenly, while a Spacer only opens up the spot where you put it. On top, only A sits on the left and B · C stick to the right; below, between spreads all three evenly.

ABC

rx.vstack(
    rx.flex(rx.badge("A"), rx.spacer(), rx.badge("B"), rx.badge("C"), spacing="2", width="100%"),
    rx.flex(rx.badge("A"), rx.badge("B"), rx.badge("C"), justify="between", width="100%"),
    width="100%",
    spacing="4",
)

Filling the order

One Spacer between the logo group and the two buttons, and the logo sticks to the left while the buttons go to the far right.

Workshop

rx.hstack(
    rx.hstack(rx.icon("hammer"), rx.text("Workshop", weight="bold"), align="center"),
    rx.spacer(),
    rx.button("Log in", variant="soft"),
    rx.button("Sign up"),
    align="center",
    width="100%",
    padding="12px 16px",
    border_bottom="1px solid var(--gray-6)",
)

Workshop notes

rx.spacer() is an empty slot that takes up the leftover space inside a Flex.
It pushes apart the neighbors on either side. Several share the space equally.
It only works inside flex · hstack · vstack · stack. In a vstack the parent needs a height.
To spread all children evenly use justify="between"; to open up just one spot use a spacer.

← Previous

Layout · Center

Layout · Separator

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.