如何在Python Reflex中实现响应式布局，切换HStack与VStack？

方案一：利用rx.stack的响应式direction属性 #

Reflex的rx.hstack本质是direction="row"的rx.stack，rx.vstack是direction="column"的rx.stack。通过给direction设置数组形式的值，就能对应不同屏幕断点切换布局方向：

rx.stack(
    rx.box("第一个Div", bg="blue", padding="1rem"),
    rx.box("第二个Div", bg="green", padding="1rem"),
    rx.image(src="/your-image.jpg", width="200px"),
    # 断点顺序：xs(0px)、sm(480px)、md(768px)、lg(1024px)、xl(1280px)
    # 前三个小屏断点用column（垂直排列），后两个大屏断点用row（水平排列）
    direction=["column", "column", "column", "row", "row"],
    spacing="1rem",
)

你可以根据需求调整数组内的column和row位置，适配不同断点的布局。

方案二：通过display数组控制不同布局的显隐 #

如果需要在大屏和小屏下有更差异化的布局细节，可以分别定义hstack和vstack，再用display数组控制它们在不同断点下的显示/隐藏：

rx.box(
    # 大屏（lg及以上）显示水平布局
    rx.hstack(
        rx.box("第一个Div", bg="blue", padding="1rem"),
        rx.box("第二个Div", bg="green", padding="1rem"),
        rx.image(src="/your-image.jpg", width="200px"),
        spacing="1rem",
        display=["none", "none", "none", "flex", "flex"],
    ),
    # 小屏（md及以下）显示垂直布局
    rx.vstack(
        rx.box("第一个Div", bg="blue", padding="1rem"),
        rx.box("第二个Div", bg="green", padding="1rem"),
        rx.image(src="/your-image.jpg", width="200px"),
        spacing="1rem",
        display=["flex", "flex", "flex", "none", "none"],
    ),
)

说明 #

Reflex框架本身推荐用响应式数组处理断点适配，而非直接在style字典里写原生CSS媒体查询，这也是你之前尝试media属性未成功的原因。数组元素顺序对应Reflex默认断点：['0px', '480px', '768px', '1024px', '1280px']，分别对应xs、sm、md、lg、xl五个尺寸档位。

内容的提问来源于stack exchange，提问作者Mahmudur Rahman Shovon