R

ReflexKR

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

·

Em

·

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
Example
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_childTrue / FalseFalse渲染为子元素并合并属性

所有属性与 Flex 相同，都可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。

rx.stack：自己指定方向

rx.stack 没有默认方向，不设置就横向堆叠。官方文档用 CSS 属性 flex_direction 指定方向，而已安装的 0.10 还带有 Flex 的 direction 属性，两种写法都可以。下面左边是 flex_direction="row"，右边是 direction="column"。

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

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

收集项目：电子邮箱 · 用途：本课程的新课时和上线通知 · 保存期限：直到你要求删除。不会用于其他用途，也不会提供给他人。回复任意通知邮件，我们会立即删除。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

以纯文本显示，不支持链接和格式。

R

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明
한국어English日本語简体中文EspañolDeutsch

© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0

Built with Reflex