flex-grow

Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и на сколько.

В этом примере элемент с классом .item вырастет по ширине, игнорируя значение ширины и размер контента. Но только при наличии свободного места.

        
          
          .container {  display: flex;}.item {  flex-grow: 1;}
          .container {
  display: flex;
}

.item {
  flex-grow: 1;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если у всех флекс-элементов будет прописано flex-grow: 1, то свободное пространство в контейнере будет равномерно распределено между ними всеми.

Если при этом одному из элементов мы зададим flex-grow: 2, то он постарается занять в два раза больше свободного места, чем его соседи.

По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

💡 Очень удобно задать всем флекс-элементам flex-grow: 1, и тогда они будут равного размера и займут всё внутреннее пространство родителя.
💡 Свойство работает с пропорциональным разделением пространства, не с конкретными размерами. Разобраться во всём поможет статья «Как реально работает flex-grow».