Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Layout

/

Center

Center is a component that centers its children within itself. It is based on the flex component and therefore inherits all of its props.

Hello World!

rx.center(
    rx.text("Hello World!"),
    border_radius="15px",
    border_width="thick",
    width="50%",
)

A center component.

Test
PropTypeDescriptionValues
as_childbool

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

directionUnion

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

alignUnion

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

justifyUnion

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

wrapUnion

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

spacingUnion

Gap between children: "0" - "9"

Event Triggers

See the full list of default event triggers
← CardContainer →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting