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».

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline