ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

레이아웃

Spacer

rx.spacer

공식 문서

공방 주문서

머리글 왼쪽에는 로고를, 오른쪽 끝에는 로그인 버튼을 붙여 주세요.

rx.spacer는 Flex 안에서 남는 공간을 모두 차지하는 빈 칸입니다. 자식 사이에 끼워 넣으면 양옆의 자식을 밀어내므로, 어떤 것은 왼쪽에, 어떤 것은 오른쪽 끝에 붙일 때 씁니다. Spacer가 여러 개면 남는 공간을 똑같이 나눠 갖습니다.

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%",
)

Spacer의 자리 옮겨 보기

Spacer는 자기 모양이 없어 실습대 대신, 어디에 끼우느냐에 따라 결과가 어떻게 바뀌는지 보겠습니다. 아래에서 Spacer를 넣을 자리를 고르세요. start + end처럼 양 끝에 하나씩 두면 가운데로 모입니다.

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%",
)

속성	값	기본값	쓰임
(스타일) `flex`	`1`	Reflex가 넣는다	남는 공간을 차지한다. 여러 개면 똑같이 나눈다
(스타일) `align_self` `justify_self`	`"stretch"`	Reflex가 넣는다	교차축으로도 늘어난다
`direction` `align` `justify` `wrap` `spacing` `as_child`	Flex와 같음	없음	Flex를 바탕으로 해서 받지만, 빈 칸이라 쓸 일이 거의 없다

Spacer는 부모가 Flex 계열(rx.flex, rx.hstack, rx.vstack, rx.stack)일 때만 공간을 차지합니다. rx.box 안에서는 아무 일도 하지 않습니다.

스택 안에서, 세로 방향에서

stack, vstack, hstack은 모두 Flex로 만들어져 Spacer를 그대로 쓸 수 있습니다. 세로 방향(vstack)에서는 높이를 나눕니다. 왼쪽 메뉴는 Spacer 덕분에 'Log out'이 맨 아래로 내려갑니다. 세로 방향은 부모에 높이가 있어야 남는 공간이 생깁니다.

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%",
)

justify="between"과 비교

자식을 양 끝에 벌려 놓는 것은 justify="between"으로도 됩니다. 다만 between은 모든 자식 사이를 고르게 벌리고, Spacer는 끼운 자리만 벌립니다. 위는 A만 왼쪽에 두고 B·C는 오른쪽에 붙였고, 아래는 between으로 셋을 고르게 벌렸습니다.

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",
)

주문서 완성

로고 묶음과 버튼 둘 사이에 Spacer 하나를 두면, 로고는 왼쪽에, 버튼들은 오른쪽 끝에 붙습니다.

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)",
)

공방 노트

rx.spacer()는 Flex 안의 남는 공간을 차지하는 빈 칸이다.
끼운 자리의 양옆을 밀어낸다. 여러 개면 공간을 똑같이 나눈다.
flex·hstack·vstack·stack 안에서만 동작한다. vstack에서는 부모 높이가 필요하다.
모든 자식을 고르게 벌릴 때는 justify="between", 한 자리만 벌릴 때는 spacer.

← 이전

레이아웃 · Center

레이아웃 · Separator

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex