В 4 и 2 колоны вот так:
width: calc(25% - 15px/3)
означает, что элемент будет равен 25%
, а также у каждого блока нужно вычесть сумму отступов, делённую на количество отступов в линии.
Сжатие в 2 колонны написал в медиазапросах по этой же логике при 500px и меньше
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.favor-border {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
}
.favor-elem {
background: #393F47;
min-height: 150px;
width: calc(100%/4 - 15px/3);
margin-top: 20px;
margin-right: 5px;
}
.favor-elem:nth-child(4n) {
margin-right: 0;
}
@media (max-width: 500px) {
.favor-elem {
width: calc(50% - 5px/2);
margin-right: 5px;
}
.favor-elem:nth-child(4n) {
margin-right: 0;
}
.favor-elem:nth-child(2n) {
margin-right: 0;
}
}
<div class="favor-border">
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
<div class="favor-elem"></div>
</div>