Flexbox 布局 - 如果足够长，多行答案

【问题标题】：Flexbox layout - multiple lines if long enoughFlexbox 布局 - 如果足够长，多行
【发布时间】：2016-01-02 23:18:43
【问题描述】：

我的布局是flexbox:

但是，当第一行的一个列中的内容增加时，我没有得到我想要的。下一张图片解释了我得到了什么以及我想要什么：

基本上，如果需要，我希望框 3 跨越多行，而不更改框 4 的位置

请帮我解决这个问题。谢谢

【问题讨论】：

请在 sn-p 中发布您的代码并演示 MCVE。
您也有 2 张重复的图片与所需的位置，这令人困惑。
我不认为它令人困惑......我有 image1 的布局。但是当 box3 的内容增加时，我得到了 image2 中的布局（我得到了什么）。我想要的是 image3（我想要的）。基本上，如果需要，我希望框 3 跨越多行，而不改变框 4 的位置。但我编辑得更清楚了。
我认为这在 flexbox 中是不可能的。
Display flex 不可能。您应该为此使用可用的 JQuery 插件。

【解决方案1】：

这件事用 Flexbox 是不可能的。你应该使用很多可用的 JQuery 插件。

您可以在以下 JQuery 插件中查看它。

这是一些可用的插件，它们将为您提供您想要的输出。您还可以在搜索引擎上找到其他插件。
希望对您有所帮助。

【讨论】：

【解决方案2】：

Flexbox 无法满足您的需求，但您仍然可以使用它们。

这就是它的样子，所以下面的解释会更容易理解：

根据您发布的图片，蓝色块 1 和 2 是 flex: 1 和 flex: 2，这意味着块 1 将始终是其父级的 25%。这就是为什么我将 25% 设置为红色块容器。

检查小提琴是否有完整的 CSS： https://jsfiddle.net/Paf_Sebastien/dyxtq144/

【讨论】：

【解决方案3】：

Flexbox 不能以这种方式工作。它不会随机填写以使用最小高度。如果甚至可以让浏览器准确猜测您想要什么，浏览器所需的计算会减慢一切。恐怕你必须调整你的设计。

【讨论】：

当你说 flexbox 不可能时，我认为你是对的，但我认为计算不会减慢浏览器的速度......无论如何我想我会使用 JS 来检查最长框的额外高度，然后将 margin-top: -(extraheight)px 添加到框号 4。就可以了
他们可能会有点，但这是不可能的最重要的原因是因为你可以想出一百种不同的方式，人们希望获得类似的效果，但条件略有不同。跨度>