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

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 のように両端に1つずつ置くと、真ん中に寄ります。

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で3つを均等に広げました。

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

注文書を仕上げる

ロゴのまとまりと2つのボタンの間にSpacerを1つ置くと、ロゴは左に、ボタンは右端に寄ります。

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"、1か所だけ広げるならspacer。

← 前へ

レイアウト · Center

レイアウト · Separator

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex