Подскажите, как сделать выравнивание перенесенных на новую строку блоков на flex, чтобы нижний блок подстраивался под размер верхних блоков?
Страница имеет максимальную ширину max-width: 1137px
, в одну линию расположилось 4 блока с контентом.
Блокам задана минимальная ширина 261px
, что бы при достижении минимального предела блоки переносились на новую строку. Но тут и начинается вся суть проблемы с отображением.
Изначально я выстроил 4 блока в одну линию, выглядит красиво, все имеют одинаковую ширину, но если начинаю сужать страницу, блоки начинают сужаться. При достижении минимального размера, блок, который не помещается в одну линию, переносится на новую строку, а 3 оставшиеся заполняют поровну верхний ряд. Но нижний блок теперь начал занимать также всю ширину ряда, что нарушает внешний вид вывода контента и смотреться не очень гармонично.
Как сделать чтобы нижний блок брал размер верхних блоков?
Если выставить на все блоки flex-grow: 0
, теряется растяжка блоков, и в правом углу появляется пустота.
Сам код.
Первый вариант без flex-grow: 0
, перенесенный блок занимает всю ширину ряда, что не есть хорошо.
Нужно чтобы он подстроился под верхний блок, который находится над ним.
.conteiner {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid red;
}
.item {
flex: 1 1 25%;
min-width: 150px;
height: 150px;
padding: 0 10px 20px 10px;
background-color: grey;
border: 1px solid red;
margin: 5px;
}
<div class="conteiner">
<!-- Карточки новостей -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Второй вариант с flex-grow: 0, но тогда отсутствует растяжка блоков и в правом углу образуется пустота, что тоже не есть хорошо. Колонки должны растягиваться заполняя поровну весь ряд не оставляя пустот.
.conteiner {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid red;
}
.item {
flex: 1 1 20%;
min-width: 191px;
height: 150px;
padding: 0 10px 20px 10px;
background-color: grey;
border: 1px solid red;
flex-grow: 0;
margin: 5px;
}
<div class="conteiner">
<!-- Карточки новостей -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>