Layout tiles using the flex property. How to make three columns?

Question

css

I decided to replace the masonry and isotop plugins with a clean layout using flex. I took a ready-made example from here codepen.io/dudleystorey/pen/eAqzk. But here's the problem - the blocks in my layout line up to two or three columns, depending on the resolution. Explain what this is connected with and how to arrange the blocks in three columns?
https://jsfiddle.net/gwu4r33c/embedded/result/

Answer 1

Flexplorer
Read about flex and its parameters here or here for example. There are examples there, I think you will find what you need.

Answer 2

In the example, in general, some kind of tin is going on, at least in the fox ...
Make a normal example and you can think about it.
UPD:
Yep, found the problem:
height: 100vw;
vw is the viewport width, you have it applied to the height. You need vh, and everything will be fine