Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

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
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

No component specific event triggers

← SeparatorStack →

Did you find this useful?