TailwindCSS 中的 Flex 换行问题答案

【问题标题】：Flex wrap issue in TailwindCSSTailwindCSS 中的 Flex 换行问题
【发布时间】：2021-08-11 21:00:28
【问题描述】：

这就是我所拥有的：

"Hey there" <image> "more text"

但是，它会在图像之后换行，即使它应该能够容纳一些“whats up”。

如果文本太长，我怎样才能让它换行，但如果它有空格，同时包含一些“what's up”？

【问题讨论】：

【解决方案1】：

首先，你不必将 flex 与 H1 标签一起使用，H1 包含文本并且“语义上”不应该包含任何 div。

第二个div的默认显示为块，这就是为什么它们占据所有宽度并且它们当然会换行。

最后 H1 也是块，但它们是用于文本的，它们应该在其中弯曲任何东西。在您的示例中，您在 h1 标签下只有一个 flex 元素，即 div ！ Whats ups 不计为子节点

【讨论】：

谢谢！我应该知道这一点，但出于某种原因，我只是坚持使用 flex.. 非常感谢您的解释！
不客气，记住 flex box 用于 flex-container 容器类型标签，如 div，这是出于语义原因，应该包含 flex-items 而不仅仅是文本。