ReflexKR

컴포넌트 공방: 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

레이아웃

Stack

rx.stackrx.hstackrx.vstack

공식 문서

공방 주문서

설정 화면의 항목들을 위에서 아래로 같은 간격으로 쌓고, 각 항목 안의 아이콘과 글자는 가로로 나란히 놓아 주세요.

Stack은 자식들을 한 방향으로 쌓고 그 사이에 일정한 간격을 두는 상자입니다. rx.vstack은 세로로, rx.hstack은 가로로, rx.stack은 방향을 직접 정해 쌓습니다. 셋 모두 rx.flex를 바탕으로 만들어져 Flex의 속성을 그대로 씁니다. 다른 점은 기본값으로, 간격(spacing="3")과 정렬(align="start")이 미리 정해져 있습니다.

Card 1

Card 2

Card 3

rx.vstack(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
)

속성 바꿔 보기

rx.stack의 방향과 간격, 정렬을 바꿔 봅니다. 가운데 상자만 키가 커서 가로 방향일 때 align 차이가 보입니다.

속성 바꿔 보기

Example

direction

spacing

align

justify

rx.stack(
    rx.box("Example", background_color="orange", border_radius="3px", padding="4px", width="20%"),
    rx.box("Example", background_color="lightblue", border_radius="3px", padding="4px", width="30%", height="3rem"),
    rx.box("Example", background_color="lightgreen", border_radius="3px", padding="4px", width="40%"),
    direction="column",
    spacing="3",
    align="start",
    justify="start",
    width="100%",
    min_height="12rem",
    padding="8px",
    border="1px dashed var(--gray-7)",
)

direction을 column으로 바꾸면 vstack, row로 두면 hstack과 같습니다. spacing을 0으로 하면 붙어서 쌓입니다.

속성	값	기본값	쓰임
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`vstack` `"column"`, `hstack` `"row"`, `stack` 없음(가로)	쌓는 방향
`spacing`	`"0"` ~ `"9"`	`"3"`	자식 사이 간격
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"start"`	교차축 정렬. stretch면 자식이 교차축을 꽉 채운다
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	쌓는 방향(주축)의 정렬
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	넘칠 때 다음 줄로 넘길지
`as_child`	`True` / `False`	`False`	자식 요소로 그리고 속성을 합친다

모든 속성은 Flex와 같고 rx.breakpoints(...)로 화면 폭마다 다른 값을 줄 수 있습니다.

rx.stack: 방향을 직접 정하기

rx.stack은 방향 기본값이 없어 그대로 두면 가로로 쌓입니다. 공식 문서는 CSS 속성 flex_direction으로 방향을 정하는데, 설치된 0.10에는 Flex의 direction 속성도 있어 둘 다 됩니다. 아래 왼쪽은 flex_direction="row", 오른쪽은 direction="column"입니다.

Example

rx.flex(
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        flex_direction="row",
        width="100%",
    ),
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        direction="column",
        width="100%",
    ),
    width="100%",
)

hstack

가로로 쌓습니다. 자식마다 너비를 다르게 주면 그 비율대로 자리를 차지합니다.

Example

rx.hstack(
    rx.box("Example", bg="red", border_radius="3px", width="10%"),
    rx.box("Example", bg="orange", border_radius="3px", width="10%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="60%"),
    width="100%",
)

vstack

세로로 쌓습니다. 화면을 위에서 아래로 짜는 대부분의 곳에 씁니다.

Example

rx.vstack(
    rx.box("Example", bg="red", border_radius="3px", width="20%"),
    rx.box("Example", bg="orange", border_radius="3px", width="40%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="60%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="80%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="100%"),
    width="100%",
)

자식이 꽉 차지 않을 때

Stack의 align 기본값은 "start"라서, vstack 안의 버튼은 자기 글자 너비만큼만 차지합니다. 자식을 가로로 꽉 채우려면 align="stretch"를 주거나, 자식에게 width="100%"를 줍니다. 왼쪽이 기본, 오른쪽이 stretch입니다.

rx.flex(
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        width="140px",
    ),
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        align="stretch",
        width="140px",
    ),
    spacing="6",
)

실제 화면처럼

제목과 글이 든 상자 두 개를 hstack으로 나란히 놓았습니다. spacing 대신 CSS gap으로 "2em"처럼 원하는 길이를 직접 줄 수도 있습니다.

Saving Money

Set aside a small part of every pay day.

Spending Money

Balance today's wishes and tomorrow's needs.

rx.hstack(
    rx.box(
        rx.heading("Saving Money", as_="h2", size="4"),
        rx.text("Set aside a small part of every pay day.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    rx.box(
        rx.heading("Spending Money", as_="h2", size="4"),
        rx.text("Balance today's wishes and tomorrow's needs.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    gap="2em",
)

주문서 완성

바깥은 vstack으로 항목을 쌓고, 항목마다 hstack으로 아이콘·글자·스위치를 나란히 놓습니다. 가운데 rx.spacer()가 스위치를 오른쪽 끝으로 밉니다.

Notifications

Dark mode

Weekly email

rx.vstack(
    rx.hstack(rx.icon("bell"), rx.text("Notifications"), rx.spacer(), rx.switch(default_checked=True), align="center", width="100%"),
    rx.hstack(rx.icon("moon"), rx.text("Dark mode"), rx.spacer(), rx.switch(), align="center", width="100%"),
    rx.hstack(rx.icon("mail"), rx.text("Weekly email"), rx.spacer(), rx.switch(), align="center", width="100%"),
    spacing="4",
    width="100%",
    max_width="320px",
)

공방 노트

vstack은 세로, hstack은 가로, stack은 direction으로 방향을 정한다.
셋 다 Flex 바탕이라 direction·align·justify·wrap·spacing을 그대로 쓴다.
기본값이 다르다: spacing "3", align "start".
자식을 교차축으로 꽉 채우려면 align="stretch" 또는 자식에 width="100%".
안쪽 hstack + rx.spacer()로 한쪽 끝에 붙이는 것이 흔한 짜임새다.

← 이전

레이아웃 · Flex

레이아웃 · Grid

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex