БЛОГ НА HUSL


Как сжимать flex-элементы при адаптиве с flex-wrap

Автор вопроса: Александра

Пытаюсь сделать каталог товаров. При уменьшении ширины экрана от 1170 до 931 товарные блоки должны пропорционально уменьшаться в ширину, показываться по 4 товара в ряд. Но при сдвиге экрана элементы не сжимаются, а 4-ый элемент переносится на другую строку введите сюда описание изображения

При уменьшении экрана происходит так: введите сюда описание изображения

Блоки не сжимаются.


.catalog__row {
    max-width: 1175px;
    display: flex;
    flex-wrap: wrap;
}

.catalog__product {
    flex: 1 1 25%;
    margin: 40px 0px 0 0;
    max-width: 270px;
    max-height: 380px;
}

.catalog__product:not(:nth-child(4n)){
    margin-right: 30px;
}

margin должен быть фиксирован и оставаться 30px, уменьшаться должны именно блоки

Верстка карточек к черновом варианте такая (если стили внутри карточки убрать, то ничего не меняется с изменением ширины и переносом)

.product-item {
  text-align: center;
  border: 1px solid #DEDEDE;
  max-width: 270px;
  max-height: 100%;
  position: relative;
}

.product-item__image {
  padding: 10px 35px 0 35px;
  max-width: 200px;
  height: 200px;
}

.product-item__image img {
  max-width: 100%;
}

.product-item__body {
  margin: 34px 0 35px 0;
  text-align: center;
}

.product-item__text {
  font-weight: 500;
  line-height: 20.8px;
  margin-bottom: 15px;
  padding: 0 20px;
}

.product-item__price {
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
}
<div class="catalog__product">
  <div class="product-item">
    <div class="product-item__image">
      <img src="images/image1.png" alt="">
    </div>
    <div class="product-item__body">
      <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
      </div>
      <div class="product-item__price">1650 Р</div>
    </div>
    <button class="btn btn__blue">Добавить в корзину</button>
  </div>
</div>


Источник

Ответы (2 шт):

Автор решения: Oliver Patterson

Если можете, воспользуйтесь grid:

.catalog
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.product
{
  min-height: 50px;
  border: 1px solid red;
}
<div class="catalog">
  <div class="product">
    1
  </div>
  <div class="product">
    2
  </div>
  <div class="product">
    3
  </div>
  <div class="product">
    4
  </div>
  <div class="product">
    5
  </div>
  <div class="product">
    6
  </div>
</div>

→ Ссылка
Автор решения: Pr0gramm1st

Конечно, ответ с вариантом использования grid куда более элегантный и, пожалуй, даже более предпочтителен, но если всё же не желаем обходиться без flex, то можно попробовать вот так:

.catalog__row {
  max-width: 1175px;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  /*Новое*/
  margin-right: -15px;
  /*Новое*/
}

.catalog__product {
  flex: 0 1 25%;
  /*Изменено*/
  margin: 40px 0px 0 0;
  max-width: 270px;
  max-height: 380px;
  padding-left: 15px;
  /*Новое*/
  padding-right: 15px;
  /*Новое*/
  box-sizing: border-box;
  /*Новое, но у вас должно бы быть, полагаю, прописано*/
  width: calc(100% / 4);
  /*Новое*/
}


/*Убираем, так как в таком случае оно лишнее*/


/*.catalog__product:not(:nth-child(4n)){ 
                margin-right: 30px; 
            }*/

.product-item {
  text-align: center;
  border: 1px solid #DEDEDE;
  max-width: 270px;
  max-height: 100%;
  position: relative;
}

.product-item__image {
  padding: 10px 35px 0 35px;
  max-width: 200px;
  height: 200px;
}

.product-item__image img {
  max-width: 100%;
}

.product-item__body {
  margin: 34px 0 35px 0;
  text-align: center;
}

.product-item__text {
  font-weight: 500;
  line-height: 20.8px;
  margin-bottom: 15px;
  padding: 0 20px;
}

.product-item__price {
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
}
<div class="catalog__row">
  <div class="catalog__product">
    <div class="product-item">
      <div class="product-item__image">
        <img src="images/image1.png" alt="">
      </div>
      <div class="product-item__body">
        <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
        </div>
        <div class="product-item__price">1650 Р</div>
        <button class="btn btn__blue">Добавить в корзину</button>
      </div>
    </div>
  </div>
  <div class="catalog__product">
    <div class="product-item">
      <div class="product-item__image">
        <img src="images/image1.png" alt="">
      </div>
      <div class="product-item__body">
        <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
        </div>
        <div class="product-item__price">1650 Р</div>
        <button class="btn btn__blue">Добавить в корзину</button>
      </div>
    </div>
  </div>
  <div class="catalog__product">
    <div class="product-item">
      <div class="product-item__image">
        <img src="images/image1.png" alt="">
      </div>
      <div class="product-item__body">
        <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
        </div>
        <div class="product-item__price">1650 Р</div>
        <button class="btn btn__blue">Добавить в корзину</button>
      </div>
    </div>
  </div>
  <div class="catalog__product">
    <div class="product-item">
      <div class="product-item__image">
        <img src="images/image1.png" alt="">
      </div>
      <div class="product-item__body">
        <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
        </div>
        <div class="product-item__price">1650 Р</div>
        <button class="btn btn__blue">Добавить в корзину</button>
      </div>
    </div>
  </div>
  <div class="catalog__product">
    <div class="product-item">
      <div class="product-item__image">
        <img src="images/image1.png" alt="">
      </div>
      <div class="product-item__body">
        <div class="product-item__text">Увлажнитель воздуха STARWIND SHC1322, 3л, белый
        </div>
        <div class="product-item__price">1650 Р</div>
        <button class="btn btn__blue">Добавить в корзину</button>
      </div>
    </div>
  </div>
</div>

А что мы сделали: поставили свойство box-sizing: border-box;, чтобы наши рамки учитывались в ширину элемента. Далее расширили строку, содержащую элементы, за счёт отрицательных margin'ов, чтобы вписать padding'и элементам для тех самых 30px отступов между ними. При этом не забыли убрать уже ненужный margin-right: 30px;. А вишенкой на торт добавили (простите, но я считаю это всё же костылём по сравнению с grid'ом) width: calc(100% / 4);, чтобы одинокие перенесённые на другую строку блоки были той же ширины, что и 4 других элемента. И для flex-grow: 1; из свойства flex: 1 1 25%; поставили значение 0 (хотя в данном случае можно вообще удалить это свойство)

→ Ссылка

licensed under cc by-sa 3.0 with attribution.