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

Question

我一直在做一个辅助项目来学习 tailwind css，但我遇到了 flexbox 方向的响应问题。

据我所知，您可以通过添加 sm: md: lg: 使 html 标签响应因此它将根据屏幕分辨率使用相应的 class。但是当我用 flexbox 尝试这个时它不起作用。

这是我的一段代码：<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

Answer 1

如果不单独使用 "flex"，则不能使用 flex-col 或 flex-row（以及其他 flex 类）。 Class "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

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

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

Problem with tailwind css responsive flex direction

css

flexbox

tailwind-css