Javascript Flexbox布局-多行（如果足够长）

我有一个带有

flexbox

的布局：

然而，当第一行的一列中的内容增加时，我无法得到我想要的。下一幅图解释了我得到的和我想要的：

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

---

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

Flexbox不是这样工作的。它不会随机填写以使用最小高度。如果浏览器能够精确地猜出你想要的东西，那么浏览器所需的计算会使一切变慢。恐怕您必须调整您的设计。

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

下面是它的样子，因此下面的解释更容易理解：

创建两个将显示

内联块的容器。第一个（蓝色块）为75%，第二个25%

蓝色块位于flexbox中。根据需要设置flex规则

红色块有自己的容器，也可以根据需要设置样式

根据您发布的图像，蓝色块1和2分别是

flex:1

和

flex:2

，这意味着块1将始终是其父块的25%。这就是我将红色块容器设置为25%的原因

---

---

检查fiddle以获得完整的CSS:使用Flexbox无法实现此功能。您应该使用大量可用的JQuery插件

您可以查看以下JQuery插件

(一)

(二)

(三)

(四)

这是一些可用的插件，它们将为您提供理想的输出。 你也可以在搜索引擎上找到其他插件

---

希望有帮助。

请在代码片段中发布您的代码，并演示一个。您还有两个重复的图像，它们的位置与所需的位置相同，这令人困惑。我不认为这会让人困惑。。。我有图像1的布局。但是当box3的内容增加时，我得到了image2中的布局（我得到的）。我想要的是图像3（我想要的）。基本上，如果需要，我希望框3跨越多条线，而不改变框4的位置。但我编辑的目的是为了更清楚。我认为这在flexbox中是不可能的。在Display flex中是不可能的。您应该使用可用的JQuery插件来完成此操作。您好，谢谢您的帮助。问题是，如果红色框的高度减小，我希望最后一个蓝色框填充页面的宽度，如：好的，我明白了，所以它变得非常复杂，您可能需要在红色框上使用

float

，但解决方案将与我的完全不同，对不起……我认为您说的flexbox不可能实现这一点是正确的，但我不认为计算会减慢浏览器的速度。。。无论如何，我想我将使用JS检查最长框的额外高度，然后只需将边距顶部：-（额外高度）px添加到第4个框中。这样就可以了，可能会有一点，但最重要的原因是，这是不可能的，因为你可以想出一百种不同的方式，人们希望得到类似的效果，但条件略有不同。