ReflexKR

AI의 일기장 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")를 짧게 쓴 것과 같습니다. 두 상자의 결과가 똑같습니다.

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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex