区分移动端和桌面端

Question

我有一个组件应该根据设备更改布局。

在移动设备上它应该堆叠内容，例如：

https://codesandbox.io/s/material-demo-forked-ktoee?file=/demo.tsx

在桌面上，内容应该像这样放置：

https://codesandbox.io/s/ykyng?file=/demo.tsx

如何用 flex 解决？

Answer 1

这在没有媒体查询的情况下实现了相同的效果。 flexbox 容器设置为用

换行到多行

flex-wrap: 换行；

文本设置为使用扩展至可用空间

弹性增长：1；

并且最小宽度为 400 像素

弹性基础：400px;

https://codesandbox.io/s/material-demo-forked-f2pc8