Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Layout

/

Spacer

Creates an adjustable, empty space that can be used to tune the spacing between child elements within flex.

Example

Example

Example

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

As stack, vstack and hstack are all built from flex, it is possible to also use spacer inside of these components.

A spacer component.

Test
PropTypeDefault ValueValues
as_child
bool
direction
Union[Literal, Breakpoints]
align
Union[Literal, Breakpoints]
justify
Union[Literal, Breakpoints]
wrap
Union[Literal, Breakpoints]
spacing
Union[Literal, Breakpoints]

Event Triggers

See the full list of default event triggers
← SeparatorStack →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting