Как сверстать на флексах блок с картинками «плиткой» разной высоты?

Question

[Полина Емельянова]

Здравствуйте!
Дорогие коллеги, подскажите, как бы вы реализовали вот такой блок с фото:


я вижу тут 3 варианта:
1. Раскладка на флоатах (а не хоца... совсем не хоца)
2. имитация таблицы или, что еще хуже, релятивно-абсолютный костыль...
3. Флексы, но я не представляю как здесь можно реализовать флекс-бокс масонри.))

САБЖ: С равными по высоте плитками все кристально ясно, то вот как быть с блоком, который выделен?
Тут уже был вопрос, по такой раскладке, но там был ответ на флоатах.

ВОПРОС: Прошу, уточните, возможно ли это именно на флексбоксах? Прошу, покажите, как бы вы решили данную задачу.

Заранее СПАСИБО!!!

Answer 1

[Сергей Горячев]

https://jsfiddle.net/bs78zsem/
Потом перестраиваешь через медиа-запросы.

Comments

[Полина Емельянова]

Т.е. мы контролируем высоту потомка, через уже известную контейнера... По ходу, по-другому с флексами ни как... Как всегда все просто.... СПАСИБО!!!

[Сергей Горячев]

Полина Емельянова: Можно на jquery написать пару строк, чтобы не задавать высоту родителя. Аля, высота родителя = высоте большого блока. И при ресайзе следить за ними. Дальше можно усложнить условия, перестраивать уже на jquery. Но это нужно условия точные знать)

Answer 2

[Nevada18]

этот же макет верстал))на флексах. может не совсем правильно и красиво, но... https://nevada18.github.io/
правда доработать его по мелочи еще надо

Answer 3

[Евгений Вольф]

Оригинал, чуть-чуть доработано напильником, мной, на скорую руку.

Comments

[Вова Дружаев]

Вы не допилили, а обкрамсали. Морды вытянуты у баб

Answer 4

[webhero]

https://codepen.io/anon/pen/VzopMR

Вот мой вариант, сам дошёл до этого

Comments

[Полина Емельянова]

Все прекрасно, но я вижу пустой экран. Код конечно, это хорошо...
tinyurl.com/ycyp2tvb

Answer 5

[Nickita]

https://bulma.io/documentation/layout/tiles/