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

レイアウト

Center

rx.center

公式ドキュメント

工房の注文書

空のカート画面のど真ん中に、アイコンと案内の文を置いてください。

rx.center は、子を自分の中の縦横ちょうど真ん中に置く箱です。rx.flex をもとに作られているのでFlexのプロパティをすべて使え、最初から中央揃えのスタイル（align_items・justify_content が center）が入っています。空の画面の案内、アイコンのバッジ、読み込み中の表示など、何かを真ん中に置きたいときに使います。

Hello World!

rx.center(
    rx.text("Hello World!"),
    border="4px solid var(--gray-7)",
    border_radius="15px",
    width="50%",
    padding="12px",
)

プロパティを変えてみる

箱の大きさが中身より大きいときに、中央揃えが目に見えます。幅や高さを変えても、カードは常に真ん中にとどまります。

プロパティを変えてみる

Card 1

Card 2

Card 3

direction

spacing

width

height

rx.center(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    direction="row",
    spacing="3",
    width="100%",
    height="12rem",
    border="1px dashed var(--gray-7)",
    border_radius="8px",
)

directionをcolumnにすると、カードが縦に積み重なったまま真ん中に置かれます。spacingはカード同士の間隔です。

プロパティ	値	既定値	用途
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	複数の子を並べる方向
`spacing`	`"0"` ~ `"9"`	なし	子同士の間隔
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	はみ出したら次の行へ
`width` `height`	CSSの長さ	中身に合わせる	中央を決める領域の大きさ
`as_child`	`True` / `False`	`False`	子要素として描画し、プロパティを合成する

Flexの align・justify も受け付けますが、Centerはすでにどちらも中央に揃えてあるので、わざわざ指定することはほとんどありません。

rx.flexで書くと

Centerは rx.flex(..., align="center", justify="center") を短く書いたものと同じです。2つの箱の結果はまったく同じです。

rx.center

rx.flex + align + justify

rx.flex(
    rx.center(rx.text("rx.center"), width="45%", height="6rem", background_color="var(--gray-3)"),
    rx.flex(
        rx.text("rx.flex + align + justify"),
        align="center",
        justify="center",
        width="45%",
        height="6rem",
        background_color="var(--gray-3)",
    ),
    justify="between",
    width="100%",
)

アイコンのバッジ

幅と高さを同じにして角を丸めると、アイコンや数字を入れる丸いバッジになります。中身はCenterが自動で真ん中に置きます。

rx.flex(
    rx.center(rx.icon("check", color="var(--grass-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--grass-3)"),
    rx.center(rx.icon("x", color="var(--red-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--red-3)"),
    rx.center(rx.text("42", weight="bold"), width="48px", height="48px", border_radius="8px", background_color="var(--accent-3)"),
    spacing="3",
)

注文書を仕上げる

direction="column" でアイコン、見出し、案内、ボタンを縦に積み、たっぷりとった min_height の中で真ん中に置きました。ページ全体の真ん中に置くなら min_height="100vh" を指定します。

Your cart is empty

Add something you like.

rx.center(
    rx.icon("shopping-cart", size=40, color="var(--gray-9)"),
    rx.heading("Your cart is empty", size="4"),
    rx.text("Add something you like.", size="2", color="var(--gray-11)"),
    rx.button("Go shopping", variant="soft"),
    direction="column",
    spacing="3",
    width="100%",
    min_height="16rem",
    border="1px dashed var(--gray-6)",
    border_radius="8px",
)

工房ノート

rx.centerは子を縦横の真ん中に置く。
rx.flex(align="center", justify="center")と同じ。Flexのプロパティをそのまま使う。
中央揃えが見えるには箱が中身より大きい必要がある：width・height・min_height。
複数の子はdirectionとspacingで積み重ねて間隔をとる。

← 前へ

レイアウト · Section

レイアウト · Spacer

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex