Вёрстка плиток с использованием свойства flex. Как сверстать три колонки?

Question

[kiberlain]

Решил заменить плагины masonry и isotop чистой вёрсткой с использованием flex. Взял готовый пример отсюда codepen.io/dudleystorey/pen/eAqzk. Но вот проблема - блоки в моей вёрстке выстраиваются до в две то в три колонки в зависимости от разрешения. Поясните с чем это связано и как блоки выстроить в три колонки?

https://jsfiddle.net/gwu4r33c/embedded/result/

Answer 1

[Вадим Белкин]

Flexplorer
Почитайте про flex и его параметры тут или тут например. Примеры там есть, думаю найдёте что нужно.

Answer 2

[Максим Капралов]

В примере вообще жесть какая то творится, в лисе по крайней мере...
Сделай нормальный пример и можно будет подумать.

UPD:
Ага, нашел проблему:
height: 100vw;
vw - это ширина вьюпорта, у вас применена к высоте. Надо vh, и все встанет нормально

Comments

[Максим Капралов]

В хроме тоже все в одну колонку

[kiberlain]

если менять размер окна то блоки периодически выстраиваются как надо, но с чем это связано пока не ясно

[Максим Капралов]

Ага, нашел проблему:
height: 100vw;
vw - это ширина вьюпорта, у вас применена к высоте. Надо vh, и все встанет нормально

[Максим Капралов]

joxi.ru/1A5RNKWu19DwrE по крайней мере теперь это вот так выглядит