Tailwind CSS响应式flex方向出现问题

Question

我一直在做一个侧边项目来学习Tailwind CSS，但我在我的弹性盒方向的响应性方面遇到了问题。

根据我所读到的文章，你可以通过添加sm: md: lg:来使html标签具有响应性，这样它将根据屏幕分辨率使用相应的类。但是当我尝试在弹性盒方向上这样做时，它不起作用。

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

正如您所看到的，我希望在屏幕大于md:时使用flex-row。但即使我超过768px的md:分辨率，它仍然使用flex-col。

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

这是当我删除flex-col并仅使用flex时的样子：

https://imgur.com/a/tUJKPro

- Neavehni

---

这与 flex-col md:flex-row 没有关系，因为如果您检查调试器，样式会正确更改。在这里很难提供帮助，因为 codepen 使用未定义的颜色，所以一切都是白色的。 - chojnicki

@chojnicki，我把项目移到了另一个网站上，现在可以正常工作了。https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html - Neavehni

现在好多了 ;) - chojnicki

Answer 1

如果没有使用“flex”类，则不能使用“flex-col”或“flex-row”（以及其他flex类）。 “flex”类对应于“display: flex”（没有它，您的div块将变成块），而“flex-row”是“flex-direction：row”，这需要具有flex属性才能工作。

请查看文档：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

同时根据需要修改小设备上的宽度。

- chojnicki