Flexbox布局 - 如果足够长则多行

Question

我使用flexbox：

进行此布局

然而，当第一行的一列中的内容增加时，我得不到我想要的。下一张图片解释了我得到的和我想要的东西：

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

请帮帮我。感谢

Answer 1

This thing is not possible using Flexbox. You Should Use lots of Available JQuery plugins.

You can Check it out following JQuery plugins.

1.) Packery.

2.) MCPants.

3.) Gridster.

4.) Masonry.

This are some of the available plugins which will give you, Your desirable output. You can also find other plugins on search engine.
Hope it helps.

Answer 2

Flexbox不会这样工作。它不会随机填写使用最小高度。如果甚至可以让浏览器准确猜出您想要的内容，那么浏览器所需的计算会减慢一切。你不得不调整你的设计我很害怕。

Answer 3

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

以下是什么样子，所以下面的解释会更容易理解：

1. 创建2个将显示inline-block的容器。第一个（蓝色块）为75％，第二个 25％。
2. 蓝色块位于 flexbox 中。根据需要设置弹性规则。
3. 红色块有自己的容器，也可以根据需要设置样式。

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

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