Нужно сделать такую витрину работ. Суть в том, что в ряду может быть максимум 4 работы вне зависимости от ширины экрана, т.е. этих 4 блока должны растягиваться по всей ширине.
Вот как я пытался это сделать, но остается свободное место, не растягиваются блоки по всей ширине, но это и логично, ведь я задал им максимальную ширину в примере (это для того что бы блок не растягивался по всей ширине картинки, ибо картинки большого размера).
.works {
display: flex;
flex-wrap: wrap;
}
.element {
max-height: 300px;
max-width: 400px;
border: 3px solid green;
margin: 2px;
}
img {
width: 100%;
height: 100%;
}
<div class="works">
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
<div class="element"><img src="http://farm1.static.flickr.com/953/28107506758_5fbb9dfdd0_b.jpg" alt=""></div>
</div>
Сниппет: https://codepen.io/anon/pen/JvMBOK
Как выглядит в реальной верстке (Для лучшего понимания того, что нужно):
Красным отмечена область от которой нужно избавиться. В итоге задача состоит в том, чтобы максимум в ряду было 4 блока и чтобы не оставалось место.