コンポーネント工房：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
rx.flex公式ドキュメント
工房の注文書
商品カードを何枚か横に並べ、画面が狭くなったら収まらないカードは次の行に回り込むようにしてください。
rx.flex は、CSSのフレックスボックスで子を1列に並べる箱です。横・縦の方向、折り返し、揃え方、余ったスペースの分け方を、いくつかのプロパティで決めます。既定は横（row）方向で、折り返しなしです。レスポンシブな画面を作るときにいちばんよく使うレイアウトです。
rx.flex(
rx.card("Card 1"),
rx.card("Card 2"),
rx.card("Card 3"),
rx.card("Card 4"),
rx.card("Card 5"),
spacing="2",
width="100%",
)Card 2だけ背が高いので、align の違いがよくわかります。wrap を wrap にすると、はみ出したカードが次の行に下がります。
プロパティを変えてみる
direction
align
justify
wrap
spacing
rx.flex(
rx.card("Card 1", width="30%"),
rx.card("Card 2", width="30%", height="5rem"),
rx.card("Card 3", width="30%"),
rx.card("Card 4", width="30%"),
rx.card("Card 5", width="30%"),
direction="row",
align="stretch",
justify="start",
wrap="nowrap",
spacing="2",
width="100%",
min_height="14rem",
padding="12px",
border="1px dashed var(--gray-7)",
border_radius="8px",
)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
direction | "row" "column" "row-reverse" "column-reverse" | "row" | 子を並べる方向（主軸） |
align | "start" "center" "end" "baseline" "stretch" | "stretch" | 主軸と交差する軸（交差軸）の揃え方 |
justify | "start" "center" "end" "between" | "start" | 主軸方向の揃え方。betweenは両端に寄せて間を均等に |
wrap | "nowrap" "wrap" "wrap-reverse" | "nowrap" | はみ出したときに次の行へ折り返すか |
spacing | "0" ~ "9" | なし | 子同士の間隔（Radixの間隔の段階）。CSSの gap で直接指定してもよい |
as_child | True / False | False | Flexの代わりに子要素を描画し、プロパティを合成する |
どのプロパティも rx.breakpoints(...) で画面幅ごとに違う値を指定できます。インストールされている0.10のプロパティ説明ではalignとjustifyの軸が逆に書かれていますが、実際の動作は上の表のとおりです。
子が多くて1行に収まらないとき、既定（nowrap）では子が縮みます。wrap="wrap" を指定すると、大きさを保ったまま次の行に回り込みます。公式ドキュメントのようにCSSプロパティ flex_wrap="wrap" で書いても結果は同じです。
rx.flex(
rx.foreach(
rx.Var.range(10),
lambda i: rx.card(f"Card {i + 1}", width="16%"),
),
spacing="2",
wrap="wrap",
width="100%",
)direction="column" なら上から下へ積み重なります。-reverse がつくと順番が逆になります。コードの順番はそのままに、見た目の順番だけを変えたいときに使います。
rx.flex(
rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="column"),
rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="column-reverse"),
rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="row-reverse"),
spacing="6",
wrap="wrap",
)rx.breakpoints に initial（いちばん狭い画面）から xs sm md lg xl までの値を渡すと、画面幅に応じてプロパティが切り替わります。Radixのプロパティの基準幅は、xs 520px、sm 768px、md 1024px、lg 1280px、xl 1640pxです。下の例は、狭い画面では縦に、sm 以上では横に並びます。ブラウザのウィンドウ幅を変えてみてください。
rx.flex(
rx.card("Card 1", flex_grow="1"),
rx.card("Card 2", flex_grow="1"),
rx.card("Card 3", flex_grow="1"),
direction=rx.breakpoints(initial="column", sm="row"),
spacing=rx.breakpoints(initial="2", md="4"),
width="100%",
)Flexの中の子は、3つのCSSプロパティで大きさを調整します。大きさの調整は常に主軸に沿って起こります（rowなら幅、columnなら高さ）。
flex_basis：基準となる大きさ。なければ width（または height）を、それもなければ中身の大きさを使います。flex_grow（既定は "0"）："0" なら基準の大きさより大きくなりません。"1" なら余ったスペースを占めます。flex_shrink（既定は "1"）："0" なら基準の大きさより小さくなりません。スライダーで外側のFlexの幅を狭めてみてください。flex_shrink=0 の箱は100pxを保ち、ほかの箱が先に縮みます。
class FlexSizeHintState(rx.State):
width_pct: int = 100
@rx.event
def set_width_pct(self, value: list[float]):
self.width_pct = int(value[0])
@rx.var
def width_css(self) -> str:
return f"{self.width_pct}%"
def flex_border_box(label, **props):
return rx.box(label, border="1px solid var(--gray-10)", border_radius="2px", padding="4px", font_size="12px", **props)
rx.box(
rx.flex(
flex_border_box("flex_shrink=0", flex_shrink="0", width="100px"),
flex_border_box("flex_shrink=1", flex_shrink="1", width="200px"),
flex_border_box("flex_grow=0", flex_grow="0"),
flex_border_box("flex_grow=1", flex_grow="1"),
width=FlexSizeHintState.width_css,
spacing="2",
margin_bottom="16px",
),
rx.slider(
min=0,
max=100,
value=[FlexSizeHintState.width_pct],
on_change=FlexSizeHintState.set_width_pct,
),
width="100%",
)カードごとに flex_basis="140px" で基準の幅を決め、flex_grow="1" で余ったスペースを分け合います。wrap="wrap" のおかげで、狭い画面では次の行に回り込みます。
Mug
$12
Plate
$12
Bowl
$12
Vase
$12
Cup
$12
Tray
$12
rx.flex(
rx.foreach(
["Mug", "Plate", "Bowl", "Vase", "Cup", "Tray"],
lambda name: rx.card(
rx.text(name, weight="bold"),
rx.text("$12", size="2", color="var(--gray-11)"),
flex_basis="140px",
flex_grow="1",
),
),
spacing="3",
wrap="wrap",
width="100%",
)工房ノート
rx.flexは子を1列に並べる。既定はrow、nowrap。
directionは主軸、justifyは主軸の揃え方、alignは交差軸の揃え方。
wrap="wrap"ならはみ出した子が次の行へ。spacing "0"~"9"で間隔。
子の大きさはflex_basis・flex_grow・flex_shrinkで調整する。
rx.breakpoints(initial=…, sm=…)で画面幅ごとに違う値を指定する。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。