Как с помощью flexbox расположить в ряд по 2-4 картинки?

Question

[Максим Иванов]

!!!!!Я невнемателен! Нужно было дисплей флекс задать для .content, но всё равно проблема - всё вылазит за граници

- Почему по 2-4 картинки? Да потому что все картинки разного размера - одна 290х274, вторая 290х588, третья 620х588, четвёртая 620х274 и не факт, что дальше не будет картинок с совершенно другими размерами...
- Вот как нужно По макету + там кнопка чуть ниже "Показать ещё" и из-за неё не факт, что картинки будут таких же размеров какие перечислены выше. Если бы я знал все размеры картинок, то мог бы просто их выстроить позишинами, но хочу попробовать флексбоксом и не получается Вариант с флексбоксом.
Как заставить работать дисплей флекс и подскажите как можно это реализовать кроме inline-block и кроме flex?

Answer 1

[Арсений Матыцин]

Используя flex-wrap, минимальные и максимальные размеры, а лучше сразу перейти на гриды с их auto-fill и\или minmax размерах.

Comments

[Максим Иванов]

Я поспешил хд
Подскажи ещё как сделать именно так как на макете? Смотри:
Я прописал flex-wrap: wrap; и первая линия нормально выстраивается, а остальные на друг друга. Как можно решить только с помощью флексов и без гридов? Вот ссылка на код и на картинки + скрин проблемы и скрин как нужно
P.S. То что я добавил для блоков с картинками 25% наверн это я лишнее сделал...

Answer 2

[Дмитрий Соболев]

Да, действительно. Именно ту часть макета Вам нужно делать через гриды. Так будет правильнее.
Могу порекомендовать хорошее видео по гридам, которое должно Вам помочь с заданием
CSS Grid Layout. Свойства определения сетки grid-t...

Comments

[Дмитрий Соболев]

Кстати, вот ещё, возможно данный ресурс Вам поможет
Css grid-generator

[Максим Иванов]

Я уже полазил в интернете и понял, что можно это всё сделать и с флексбоксами, но я успею сходить пешком в Россию и обратно в Украину пока это сделаю. Понял, что лучше всего использовать grid-templates-areas
Все равно спасибо за ответ)