Как правильно перенести flex-элементы?

Question

[froggush]

Есть дизайн с карточками. Нужно их правильно распределить по контйнеру max-width 1170px по две на строку.
если пишу flex 0 0 50% то всё ок, но тогда не получается между ними сделать отступы - карточки остаются по одной на строку. если задавать фиксированный размер карточке и прописывать justify-content: space-between\around, то промежутки получаются слишком большими. Подскажите, пожалуйста, как правильно это сделать? Вроде элементарное дело, а уже голова кипит

Спасибо, что уделили внимание

Comments

[szQocks]

flex: 1 1 calc(50% - 20px);
margin: 10px;

[szQocks]

https://jsfiddle.net/orhuztf4/

[szQocks]

Можно еще поиграться с nth-child(odd) / nth-child(even) и сделать только те марджины которые необходимо , а не как я сделал - со всех сторон

[szQocks]

Кстати хочу отметить что схлопывание у флекс элементов друг к другу не работает, как можно заметить марджины между нижними и верхними = 20 а не 10, как между элементами

[froggush]

szQocks, Спасибо за советы!

[szQocks]

froggush, https://jsfiddle.net/s7z95ngj/

Answer 1

[Александр]

Для родителя

display: flex; flex-wrap: wrap; justify-content: space-between;

Для айтемов
width: calc(50% - 10px);

В итоге у вас один айтем выйдет 575px, соответственно отступ между ними будет 20px

Либо в процентах указывайте ширину (напр. 49.5%)

Comments

[froggush]

Спасибо!