Tailwind CSS 响应式弯曲方向问题

Question

我一直在做一个副项目来学习顺风CSS，我面临着弹性盒方向响应能力的问题。

根据我所读到的内容，您可以通过添加使 html 标记响应，sm: md: lg: 以便它将根据屏幕分辨率使用相应的类。但是当我用 Flexbox 尝试这个时，它不起作用。

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

正如你所看到的，我想在大于 的屏幕上使用 flex-row md:。flex-col但即使我超过了md:768px 的分辨率，它仍然会继续使用。

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

flex-col这就是我删除并仅使用时的样子flex： https ://i.stack.imgur.com/lR4C4.jpg

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

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