CSS делает гибкие обернутые элементы не превышают ширину их братьев и сестер

Я застрял в проблеме с растягивающимися сгибами. У меня есть flexbox div с элементами. Эти элементы могут растягиваться до полной ширины и иметь свойство min-width, так что 3-4 элемента могут поместиться на больших экранах и 1-2 в малом размере. Я хочу сделать их ширины равными, но проблема в том, что обернутые элементы шире, если их количество меньше, чем на верхних элементах.

Прилагается ниже моего текущего результата и ожидаемого поведения. Как я могу это сделать?

Ответы

Ответ 1

Это сложный случай, вам нужны медиа-запросы, адаптированные к вашему конкретному макету и количеству присутствующих элементов.

У меня есть цветовая кодировка результатов различных медиа-запросов, которые помогают идентифицировать их

А также три дополнительных div внутри элемента items, чтобы помочь с размерами

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  min-width: 400px;
  border: 1px solid black;
  margin: 0;
  height: 100px;
  flex-grow: 2;
}

.filler1, .filler2, .filler3 {
  height: 0px;
  background-color: lightgreen;
}

@media only screen and (max-width: 820px)  {
  /* one item per line */
  .filler2, .filler3 {display: none;}
  .item {background-color: yellow;}
}

@media only screen and (min-width: 821px) and (max-width: 1220px)  {

    /* 2 items per line */

    .item:nth-last-child(4) {
        order: 9;
        background-color: red;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1221px) and (max-width: 1620px)  {

    .item:nth-last-child(4), .item:nth-last-child(5) {
        order: 9;
        background-color: green;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1621px) and (max-width: 2020px)  {

    .item:nth-last-child(4) {
        order: 9;
        background-color: lightblue;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 400px;
      flex-grow: 2;
      order: 4;
    }
    .filler3 {
      min-width: 400px;
      flex-grow: 2;
      order: 14;
    }
}

<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
    <div class="filler1"></div>
  <div class="filler2"></div>
  <div class="filler3"></div>
</div>