0

Подскажите, как сделать выравнивание перенесенных на новую строку блоков на 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>

2 ответа 2

1

Насколько это всё нужно сделать именно флексами?

Такие колонки очень хорошо и просто делать на гридах, они собственно для такого и были придуманы, а сейчас уже везде поддерживаются. Смотрите:

.conteiner {
  width: 100%;
  outline: 1px solid red;
  /* Задаем грид */
  display: grid; 
/*   Задаем ширины колонок:
  auto-fit - сам выберет количество колонок, смотря сколько поместится
  minmax - задаем минимальное и максимальное значение
  150px - меньше 150 колонка не займет в ширину
  1fr - при ширине больше минимальной колонка будет растягиваться */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
/*   Расстояние между колонками */
  gap: 5px;
}

.item {
  min-height: 150px;
  padding: 0 10px 20px 10px;
  background-color: grey;
  outline: 1px solid red;
}
<div class="conteiner">

  <!-- Карточки новостей -->
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

0

Немного отдохнув, и решение пришло само.
Значит так, все изначально было правильно мною построено, как изначально изложил код -

.conteiner {
display: flex;
flex-wrap: wrap;
}
.shortstory {
flex: 1 1 25%;
min-width: 261px;
padding: 0 10px 20px 10px;
}

То есть, колонки имеют минимум ширину 261 пиксель, достигнув предела по ширине лишний блок будет переносится на новый ряд, что в итоге он и будет заполнять его на все 100% так как блокам изначально поставлен flex-grow: 1. Если мы хотим получить полную заполняемость ряда, и чтобы блоки распределяли поровну всю ширину, выставляем flex-grow: 1, а не flex-grow: 0, тогда все будет ок.
Но, что же делать с тем блоком, который переносится и растягивается на всю ширину колонки нарушая внешний вид? Ответ был прост и понятен изначально, просто я немного тупанул.
Я изначально выстроил в один ряд 4 колонки, на странице разместил всего 2 ряда, то есть 8 блоков, но если мы начнем сужать страницу, с каждого ряда отваливается по одному блоку, которые заполнят уже новый созданный ряд и заполнят его поровну, что в итоге получим 2 блока больше других.
Значит стоит сделать вывод, что нужно разместить на странице не 8 блоков, а 12, таким образом при сужении будет отваливаться уже не два блока, а три, что в итоге везде будет поровну.
Вот и решение вопроса.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.