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, таким образом при сужении будет отваливаться уже не два блока, а три, что в итоге везде будет поровну.
Вот и решение вопроса.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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