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 は方向を自分で決めて積み重ねます。3つとも 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",
)

実際の画面のように

見出しと文章の入った箱を2つ、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で方向を決める。

  • 3つとも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