Flexbox layout - multiple lines if long enough

Question

I have this layout with flexbox:

However, when the content in one of the columns of the first row grows, I do not get what I want. This following image explains what I get and what I want:

Basically, I want field 3 to span multiple lines, if necessary, without changing the position of box4

Please help me with this. Thanks

Answer 1

This item is not possible with Flexbox . You should use the many jQuery plugins available.

You can check it after jQuery plugins.

1.) Packery .

2.) MCPants.

3.) Gridster.

4.) Masonry.

, , . .
, .

Answer 2

Flexbox . . , , , , , . , .

Answer 3

Flexbox , , .

, , :

• 2 , inline-block. ( ) 75%, - 25%.
• flexbox. , .
• , , .

, , 1 2 flex: 1 flex: 2, , 1 25% . 25% .

---

CSS: https://jsfiddle.net/Paf_Sebastien/dyxtq144/