flex-grow

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

В этом примере элемент с классом .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».