Как реализовать на Flexbox такое же выстраивание, как у Masonry (Isotope и т.п.)?

Question

[Igor Lanko]

Все в курсе про эту штуку на jQuery, которая делает отличные плитки в стиле пинтерест.

Может ли Flexbox полностью заменить её? Основной плюс Masonry по сравнению с Flexbox – это возможность выстраивания блоков рандомной плиткой ВНЕ зависимости от высоты. А Flex (и обычные float'ы) опираются на наибольшую высоту в горизонтальной линии.

Comments

[Igor Lanko]

В общем, решения пока нет. Метод, который предложил Ksider, к сожалению, работает только с изображениями внутри блоков (либо с самими изображениями). Если, например, в блок с картинкой добавить текст, заключенный в тег p, то сетка выстроится, но сам текст будет уходить относительно параметра flex-direction и justify-content, то есть (по умолчанию) вправо. И никак его не заставить двигаться по вертикали, тем самым расширяя высоту блока.

Answer 1

[Ksider]

вот жеж codepen.io/dudleystorey/pen/eAqzk

Comments

[Igor Lanko]

Стоп, но тогда растёт горизонтальная ось. А должно же по вертикали.

Answer 2

[Александр Таратин]

w3bits.com/css-masonry

Comments

[Igor Lanko]

Ну, это не Flexbox, а Columns. Поддержка у них куда скуднее, чем у Flexbox.

Answer 3

[wintermoon]

Немного костылей, но есть бока при респонсе( demosthenes.info/blog/844/Easy-Masonry-Layout-With...