在 Tailwind 中调整窗口大小时如何避免 div 混乱？

Posted 2023-03-07

【中文标题】在 Tailwind 中调整窗口大小时如何避免 div 混乱？

【英文标题】：How to avoid the divs disorganizing when resizing the window in Tailwind?

【发布时间】：2021-02-28 21:57:50

【问题描述】：

你好，我有一个打字稿网站 当我调整窗口大小时会搞砸，结果如下：

如何避免调整大小和修改这些，而与窗口大小无关？ flex-wrap 和 flex-no-wrap 都不起作用

调整大小的按钮代码

<div className="flex-shrink-0 pt-6 text-center w-full justify-items-center items-center">
                      <button
                        type="submit"
                        className="flex-shrink-0 items-center xl:px-40 xl:py-2 border border-transparent text-base font-medium rounded-full text-white bg-sentient-blue hover:bg-indigo-500 focus:outline-none focus:border-sentient-blue-900 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
                      >
                        " "
                        Sign Up
                      </button>
                    </div>

【参考方案1】：

您想在两个包含标签上添加 flex-shrink-0 类以防止它们缩小。

https://tailwindcss.com/docs/flex-shrink https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

对不起，没用。我将在帖子中更新我的代码

【参考方案2】：

flex-flow 是 flex-direction 和 flex-wrap 属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap

尝试将flex-flow:column wrap 分配给父级

【讨论】：

对不起，没用。我将在帖子中更新我的代码