Как расположить flex элементы в 2 строки, чтобы получилось вот так:
Использую свойство flex-wrap
, но что-то не получается - последние элементы не прижимаются к экрану и остаётся отступ:
* {
padding: 0;
margin: 0;
}
.photos {
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
}
.photos__img {
width: 250px;
height: 300px;
}
<div class="photos">
<div class="content">
<div class="photos__img">
<img src="http://placehold.it/350x300?text=1">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=2">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=3">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=4">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=5">
</div>
<div class="photos__img">
<p>наши фото</p>
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=7">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=8">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=9">
</div>
<div class="photos__img">
<img src="http://placehold.it/350x300?text=10">
</div>
</div>
</div>