ホーム エクスプローラ ヘルプ
登録 サインイン
root
/
reflex_copy
同期ミラー https://github.com/reflex-dev/reflex.git
1
0
フォーク 0
ファイル 課題 0 Wiki
ツリー: dbd074c33d
ブランチ タグ
reflex_copy
/
docs
/
library
/
chakra
/
layout
/
flex.md

flex.md 912 B
履歴 Raw

components:

- rx.chakra.Flex

Flex

import reflex as rx

Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

rx.chakra.flex(
    rx.chakra.center("Center", bg="lightblue"),
    rx.chakra.square("Square", bg="lightgreen", padding=10),
    rx.chakra.box("Box", bg="salmon", width="150px"),
)

Combining flex with spacer allows for stackable and responsive components.

rx.chakra.flex(
    rx.chakra.center("Center", bg="lightblue"),
    rx.chakra.spacer(),
    rx.chakra.square("Square", bg="lightgreen", padding=10),
    rx.chakra.spacer(),
    rx.chakra.box("Box", bg="salmon", width="150px"),
    width = "100%",
)