컴포넌트 공방: 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 플렉스박스로 자식들을 한 줄로 늘어놓는 상자입니다. 가로·세로 방향, 줄바꿈, 정렬, 남는 공간 나누기를 속성 몇 개로 정합니다. 기본값은 가로(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의 축이 뒤바뀌어 적혀 있지만, 실제 동작은 위 표와 같습니다.
자식이 많아 한 줄에 다 들어가지 않으면 기본(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 안의 자식은 세 가지 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는 자식을 한 줄로 늘어놓는다. 기본은 row, nowrap.
direction은 주축, justify는 주축 정렬, align은 교차축 정렬.
wrap="wrap"이면 넘치는 자식이 다음 줄로. spacing "0"~"9"로 간격.
자식의 크기는 flex_basis·flex_grow·flex_shrink로 조정한다.
rx.breakpoints(initial=…, sm=…)로 화면 폭마다 다른 값을 준다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.