Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства <code>flex-grow</code> , <code>flex-shrink</code> и <code>flex-basis</code> можно объединить, используя свойство <code>flex</code> . Например, <code>flex: 1 0 10px;</code> установит элемент для <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , и <code>flex-basis: 10px;</code> , Настройки свойств по умолчанию - <code>flex: 0 1 auto;</code> ,
Добавьте свойство CSS <code>flex</code> и к <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значения, поэтому его<code>flex-grow</code> равен 2, его<code>flex-shrink</code> равен 2, аего<code>flex-basis</code> - 150 пикселей. Дайте <code>#box-2</code> значения, поэтому его<code>flex-grow</code> равен 1, его<code>flex-shrink</code> равен 1, аего<code>flex-basis</code> - 150 пикселей. Эти значения приведут к тому, что <code>#box-1</code> будет расти, чтобы заполнить дополнительное пространство с удвоенной скоростью <code>#box-2</code> когда контейнер больше 300 пикселей, и с удвоенной скоростью <code>#box-2</code> когда контейнер меньше 300 пикселей. 300px - это комбинированный размер значений <code>flex-basis</code> двух полей.