Как сделать чтобы flex-элементы сжимались даже со flex-wrap: wrap?

Question

Есть макет, на котором 6 flex-элементов в 2 строки по 3 элемента в каждой. Логично, что используется flex-wrap:wrap.

Но при адаптиве элементы должны сжиматься! а с flex-wrap:wrap они конечно будут переноситься на другую строку.

Answer 1

Ширина и отступы в процентах могут помочь в решении Вашей задачи:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.inner {
  border: 1px solid gray;
  height: 100px;
  margin: 1%;
  width: 31%;
}

<div class="wrapper">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

БЛОГ НА HUSL

Как сделать чтобы flex-элементы сжимались даже со flex-wrap: wrap?

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