顺风 css 响应式弯曲方向的问题答案

【问题标题】：Problem with tailwind css responsive flex direction顺风 css 响应式弯曲方向的问题
【发布时间】：2020-07-25 00:30:23
【问题描述】：

我一直在从事一个学习顺风 css 的辅助项目，但我遇到了我的 flexbox 方向的响应性问题。

根据我的阅读，您可以通过添加 sm: md: lg: 来使 html 标记具有响应性因此它将根据屏幕分辨率使用相应的类。但是当我尝试使用 flexbox 时，它不起作用。

这是我的一段代码：<div class="flex-col md:flex-row h-screen w-screen m-3">。

如您所见，我想在大于md: 的屏幕上使用 flex-row。但它继续使用flex-col，即使我超过了md: 768px 的分辨率。

完整代码：https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html

这是我删除 flex-col 并仅使用 flex 时的样子： https://imgur.com/a/tUJKPro

【问题讨论】：

它与 flex-col md:flex-row 无关，因为如果您检查调试器，那么样式会正确更改。在这里很难提供帮助，因为 codepen 使用未定义的颜色，所以一切都是白色的。
@chojnicki 我将项目移动到另一个正在运行的站点。 codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html
现在好多了;)

标签： css flexbox tailwind-css

【解决方案1】：

如果不单独使用“flex”，则不能使用 flex-col 或 flex-row（以及其他 flex 类）。 “flex”类对应于“display: flex”（没有它，你的 div 就是块），“flex-row”是“flex-direction: row”，没有 flex display 属性将无法工作。

查看文档：https://tailwindcss.com/docs/flex-direction

所以

<div class="flex-col md:flex-row h-screen w-screen m-3">

应该是

<div class="flex flex-col md:flex-row h-screen w-screen m-3">

固定代码：https://codesandbox.io/s/admiring-framework-lxz8y?file=/index.html

还可以根据需要在较小的设备上修改宽度。

【讨论】：