Как правильно расположить картинки?

Question

[Артур Кудашев]

Здравствуйте, делаю портфолио и не могу решить проблему. Есть макет:



Решил сделать с помощью Flexbox, но блок с маленьким изображением занимает всю свободную высоту.



Задавал фиксированную высоту, но это не помогло.

Comments

[Rustam Bainazarov]

Или grid, или делать структурные повторяющиеся блоки-обертки на flex в рамках одного родителя, или пользоваться Masonry JS.

Без кода разговор не будет получаться.

Answer 1

[tyzberd]

флексами так не будет.
Используйте https://masonry.desandro.com/ или что то подобное https://ruseller.com/lessons.php?rub=32&id=2197
или grid, там уже смотрите или устраивает поддержка
https://medium.com/@andybarefoot/a-masonry-style-l...
https://codepen.io/balazs_sziklai/pen/mOwoLg

хотя если это не часто будет менятся, то можно и флексами. Две вертикальные колонки, а в них div с двумя картинками, потом одна большая и одна меньше

Comments

[Артур Кудашев]

tyzberd про две колонки тоже подумал, но выбрал grid.

Answer 2

[Дмитрий Карпов]

Попробуй сделать направление не в ряд, а в колонки
flex-direction: column

Comments

[Артур Кудашев]

Дмитрий Карпов не помогло. Они выстроились в столб, один за другим

[Дмитрий Карпов]

Надо комбинировать направления флексов
Ссылка на код