Как сделать 4-колоночный макет через flexbox?

Question

[Фёдор]

Интересует, как реализовать такое через флекс-ы? В частности расположение картинок.

Получается либо так:

Либо так:

Я понимаю, почему так происходит. Учитывая тот факт, что размеры картинок 220х187px и ширина блока 1200px. Но не понимаю, как это расположить правильно.

Answer 1

[Фёдор]

Спасибо всем, кто откликнулся на просьбу помочь. Достучался я до автора и получил правки по ТЗ. В первой части говорилось о макете шириной 1200px. В последующих частях было изменено на 1020px. То ли дизайнер, то ли я в глаза задолбился. Но и это не всё! Вооружившись линейкой и включив сетку ФШ, выяснилось, что ширина макета. Внимание!!! 960px!! И вот кто из нас дурак?! При 960px все картинки прекрасно встали.

Answer 2

[meaqese]

Может примерно так https://jsfiddle.net/meaqese/6Lwotqh8/ (обновил)

Comments

[Фёдор]

Задача стоит, чтобы все 4 картинки располагались на ширину в 1200px. Согласно Вашему коду, блок переопределяется до ширины 960px

[meaqese]

Фёдор, Я еще раз обновил код, проверьте) №2

[Фёдор]

meaqese,

Интересный вариант. Но всё равно не то.

[meaqese]

Фёдор, Обновил

Answer 3

[approximate solution]

justify-content: у вас прописан в положении space-between если я не ошибаюсь, для родителя, и Ваши флекс дети просто раскидываются по "углам". Пропишите родителю =
justify-content: flex-start; и элементы будут расположены по потоку в нужной оси.

Так же Вам нужно будет прописать определенный размер для элементов через flex-basis, либо задать флекс grow и добавить отступы.

Comments

[Фёдор]

Непосредственно сам img или блок в которую обернул картинку?

Answer 4

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

Фёдор:

Возможно ли такое посчитать через calc?

https://codepen.io/i-am-studio_ru/pen/XWXzrRZ

Хотя на гридах, конечно же, с зазором проще и дешевле.

размеры картинок 220х187px

Картинки должны быть минимально необходимого размера чтобы для них работало условие max-width:100%, а не растягивание, которое является единственным решением в этом тупиковом кейсе.

Comments

[Фёдор]

Получается, косяк у дизайнера, который заложил в макет такие не стандартрные разрешения картинок?

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

Фёдор, если ширина контейнера 1200px, и тебе надо на десктопе уместить 4 изображения в ряд, то размер изображений должен быть не меньше 300 пикселов по ширине. Не меньше, ибо есть еще ретина и т.д. И речь пока только о десктопе.

А чтобы разложить изображения, как надо по заданному условию — в двух решениях к ответу.