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

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/