Как сделать такую галерею на flexbox?

Question

[Genri_Rus]

Вот пример галереи:

Возможно ли так сделать ?
Понятно что на гридах это проще, но как на флекс такое реализовать ?

Или есть специальные кроссбраузерные библиотеки для этого ?

P.S. Главное кроссбраузерность, у меня был пример но он несложный: тык

Comments

[Андрей Федоров]

при уменьшении ширины, что должно происходить?

[Genri_Rus]

Андрей Федоров, да просто перестраиваться

[Андрей Федоров]

Genri_Rus, невозможно на fleх. а будете делать на js, так это надо будет логику grid реализовывать. смысла нет.

[Rustam Bainazarov]

Кучей обёрток, если нужен flex:

[Genri_Rus]

Рустам Байназаров, если я на codepen попытаюсь сделать, поправите потом ?)

[Rustam Bainazarov]

Genri_Rus, лучше на jsfiddle.net.

[Genri_Rus]

Рустам Байназаров, правильно ?

[Genri_Rus]

Рустам Байназаров, последнюю картинку справа не получается сделать

[Genri_Rus]

Рустам Байназаров, сделал, но как по мне криво: пример

[Rustam Bainazarov]

Genri_Rus, неудивительно, зачем ширина элементов в px? Нужно задать максимальную ширину обёртке, а дальше уже в процентах. Основа вёрстки всего и вся. Иногда нужна ширина в абсолютных величинах, но не тут.

[Genri_Rus]

Рустам Байназаров, да там картинки будут и им max-width: 100% задается

А в целом правильно сделаны обертки ?

[Genri_Rus]

Рустам Байназаров, как делать отступы в таких галереях ?)

[Rustam Bainazarov]

Genri_Rus, например, так. С кучей обёрток.

Высоту элементам можно уже в px задать, а не, как я, доп. классами и хаком соотношения сторон:



Эмуляцию gap я делать не стал, мне лень. Делается она на calc() и margin. В данном случае будет достаточно муторная привязка к структуре местами.

[Genri_Rus]

Рустам Байназаров, спасибо большое

Я так понял отступы задавать классу gallery-grid__item
flex-basis: calc(50% - 20px); ?

А убирать отступы по краям ?

[Rustam Bainazarov]

Genri_Rus, с помощью margin.

[Genri_Rus]

Рустам Байназаров, а для класса .gallery-grid__item--size-full-height как я понял нужно задавать высоту auto ?

[Genri_Rus]

Рустам Байназаров, отступы задал через calc правильно?

[Genri_Rus]

Рустам Байназаров, есть еще неплохой вариант сделать через column-gap
На примере мультиколочной CSS Columns: ссылка

P.S. На ie 10 даже работает