El taller de componentes: los 100 componentes de Reflex
·
Resumen del curso
Diseño
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
Tipografía
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
Formularios
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
Visualización de datos
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
Mostrar y ocultar
·
Tabs
·
Accordion
·
Segmented Control
Superposiciones
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
Renderizado dinámico
·
Cond
·
Match
·
Foreach
·
Auto Scroll
Multimedia
·
Image
·
Audio
·
Video
Tablas y cuadrículas de datos
·
Table
·
Data Table
·
Data Editor
Gráficos
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
Piezas de gráficos
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
Otras bibliotecas de gráficos
·
Plotly
·
Pyplot
Elementos HTML
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
Otras herramientas
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.flexDocumentación oficial
Pedido del taller
Coloca varias tarjetas de producto en horizontal y, cuando la pantalla se estreche, que las que no quepan pasen a la línea siguiente.
rx.flex es una caja que alinea a sus hijos en una línea con flexbox de CSS. Con unas pocas propiedades decides la dirección (horizontal o vertical), el salto de línea, la alineación y el reparto del espacio sobrante. Por defecto va en horizontal (row) y sin salto de línea. Es el diseño que más se usa para crear pantallas responsivas.
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%",
)Solo Card 2 es más alta, así que la diferencia de align se aprecia bien. Si pones wrap en wrap, las tarjetas que no caben bajan a la línea siguiente.
Prueba las propiedades
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",
)| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
direction | "row" "column" "row-reverse" "column-reverse" | "row" | Dirección en que se colocan los hijos (eje principal) |
align | "start" "center" "end" "baseline" "stretch" | "stretch" | Alineación en el eje que cruza el principal (eje transversal) |
justify | "start" "center" "end" "between" | "start" | Alineación en el eje principal. between pega los extremos y reparte el espacio entre ellos |
wrap | "nowrap" "wrap" "wrap-reverse" | "nowrap" | Si pasa a la línea siguiente cuando no cabe |
spacing | "0" ~ "9" | Ninguno | Separación entre hijos (escala de espaciado de Radix). También vale gap de CSS directamente |
as_child | True / False | False | Dibuja el elemento hijo en lugar de Flex y fusiona las propiedades |
Todas las propiedades admiten valores distintos según el ancho de pantalla con rx.breakpoints(...). En la descripción de propiedades de la versión 0.10 instalada, los ejes de align y justify aparecen intercambiados, pero el comportamiento real es el de la tabla.
Si hay tantos hijos que no caben en una línea, con el valor por defecto (nowrap) los hijos se encogen. Con wrap="wrap" conservan su tamaño y pasan a la línea siguiente. Escribirlo como en la documentación oficial, con la propiedad CSS flex_wrap="wrap", da el mismo resultado.
rx.flex(
rx.foreach(
rx.Var.range(10),
lambda i: rx.card(f"Card {i + 1}", width="16%"),
),
spacing="2",
wrap="wrap",
width="100%",
)Con direction="column" se apilan de arriba abajo. Con el sufijo -reverse, el orden se invierte. Sirve para cambiar solo el orden visible sin tocar el orden del código.
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",
)Si pasas a rx.breakpoints valores desde initial (la pantalla más estrecha) hasta xs sm md lg xl, la propiedad cambia según el ancho de pantalla. Los anchos de referencia de las propiedades Radix son xs 520px, sm 768px, md 1024px, lg 1280px y xl 1640px. El ejemplo de abajo va en vertical en pantallas estrechas y en horizontal a partir de sm. Prueba a cambiar el ancho de la ventana del navegador.
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%",
)Los hijos de un Flex ajustan su tamaño con tres propiedades CSS. El ajuste siempre ocurre a lo largo del eje principal (el ancho en row, la altura en column).
flex_basis: el tamaño base deseado. Si no está, se usa width (o height); y si tampoco, el tamaño del contenido.flex_grow (por defecto "0"): con "0" no crece más allá del tamaño base. Con "1" ocupa el espacio sobrante.flex_shrink (por defecto "1"): con "0" no se encoge por debajo del tamaño base.Reduce con el deslizador el ancho del Flex exterior. La caja flex_shrink=0 mantiene sus 100px y las demás se encogen primero.
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%",
)Cada tarjeta fija su ancho base con flex_basis="140px" y se reparte el espacio sobrante con flex_grow="1". Gracias a wrap="wrap", en pantallas estrechas pasan a la línea siguiente.
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%",
)Notas del taller
rx.flex coloca a sus hijos en una línea. Por defecto, row y nowrap.
direction es el eje principal; justify alinea en el eje principal y align en el transversal.
Con wrap="wrap" los hijos que no caben pasan a la línea siguiente. spacing "0"~"9" para la separación.
El tamaño de los hijos se ajusta con flex_basis, flex_grow y flex_shrink.
Con rx.breakpoints(initial=…, sm=…) se dan valores distintos según el ancho de pantalla.
Recibe avisos de nuevas lecciones
Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.
R
ReflexKR
Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.
ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café
Aviso de afiliados© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Preguntas y respuestas
Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.