Как я могу сжимать гибкие элементы до тех пор, пока не понадобится упаковка, а затем расширяться, чтобы заполнить новое пространство?

Question

У меня есть родительский компонент flexbox с шириной около 1200 пикселей и несколько дочерних элементов с минимальной шириной около 400 пикселей.Номинально с шириной экрана более 1200 и с учетом полей и границ я могу разместить два дочерних элемента в строке, каждый шириной около 600 пикселей.

При уменьшении ширины экрана от 1200 до 800 пикселей,два дочерних элемента постепенно уменьшаются до 400 пикселей.Когда размер экрана опускается ниже 800 пикселей, происходит перенос, то есть теперь у меня есть один дочерний элемент на строку.

Мне бы хотелось, чтобы эти дочерние элементы расширились до 800 пикселей, чтобы заполнить их строки.Я получаю дочерние элементы шириной около 400 пикселей.

Если я задаю параметр Grow: 1 для дочерних элементов, они начинаются с одного на строку, каждый из которых использует полные 1200 пикселей.

Я надеюсь, что есть некоторая комбинация минимальной ширины, гибкой основы, максимальной ширины и роста (и, возможно, чего-то еще), которая может достичь желаемого результата.

Буду признателен за любые предложения.

Answer 1

Вот фрагмент, который, я считаю, достигает того, что вы хотите:

<div>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</div>
<style>
  .container {
    display: flex;
    max-width: 1200px;
    flex-wrap: wrap;
  }

  .box {
    outline: solid red 1px;
    min-width: 400px;
    flex-grow: 2;
    /* flex: 2 0 50%; */ /* If you want to ensure that you never get more than 2 items per row */
  }
</style>

В общем, требуемое свойство: flex-grow: оно гарантирует, что компонент заполнит доступное пространство в своей строке до указанного коэффициента (в данном случае 2, от ширины 400px до 800px).

Если важно не размещать более двух элементов в строке на более широких экранах, я добавил альтернативное свойство flex для того, которое использует flex-basis в 50%, чтобы сделать компоненты «жадными» при перетекании на строк, чем они были бы в противном случае.