Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Layout

/

Spacer

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

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.

API Reference

Spacer

A spacer component.

Test

Prop	Type	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`direction`	Literal	How child items are layed out: "row" \| "column" \| "row-reverse" \| "column-reverse"
`align`	Literal	Alignment of children along the main axis: "start" \| "center" \| "end" \| "baseline" \| "stretch"
`justify`	Literal	Alignment of children along the cross axis: "start" \| "center" \| "end" \| "between"
`wrap`	Literal	Whether children should wrap when they reach the end of their container: "nowrap" \| "wrap" \| "wrap-reverse"
`spacing`	Literal	Gap between children: "0" - "9"

Event Triggers

See the full list of default event triggers

← Separator Stack →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Spacer

API Reference

Spacer