Что такое flex-grow

flex-grow отвечает за рост flex-элемента, когда в flex-контейнере осталось положительное свободное место. Значение задают числом, например 0, 1, 2, 0.5. Чем больше число относительно соседей, тем большую долю свободного места получит элемент.

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

Значение по умолчанию равно 0. Элемент сохраняет базовый размер и не забирает пустое пространство, пока вы явно не разрешите рост.

Представьте строку с кнопкой фиксированного размера и полем, которое должно занять все остальное место.

.toolbar {
  display: flex;
  gap: 12px;
}

.search {
  flex-grow: 1;
  min-width: 0;
}

.button {
  flex: 0 0 auto;
}

Здесь .search является flex-элементом и получает свободное место после кнопки и gap. min-width: 0 полезен, если внутри поля или соседнего блока есть длинный текст. Без него элемент может не сжаться, вытолкнуть кнопку за экран и создать горизонтальный скролл. Такой блок лучше сразу проверить на длинных значениях, мобильной ширине и клавиатурной навигации.

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

Неполный CSS.

.card {
  flex-grow: 1;
}

Если у карточек разный текст, картинки или заданный width, они могут начать с разных базовых размеров. Потом каждая получит одинаковую долю свободного места, но итоговые размеры все равно будут разными. В интерфейсе вы увидите неровную сетку, скачки переносов и разные кликабельные зоны.

Для равных колонок чаще используют такой вариант.

.card {
  flex: 1 1 0;
  min-width: 0;
}

Здесь базовый размер фактически сброшен, поэтому свободное место делится от одинаковой стартовой точки. Но это не универсальная замена. Если контенту нужен минимальный размер, добавьте min-width, настройте обрезку или перенос текста. Для сетки карточек иногда проще выбрать CSS Grid.

На интервью можно ответить так.

flex-grow задает коэффициент роста flex-элемента. Он распределяет положительное свободное место внутри flex-контейнера. Если одному элементу дать 2, а другому 1, первый получит в два раза большую долю свободного места. Итоговый размер все равно зависит от flex-basis, width, gap и ограничений.

Такая формулировка звучит точнее, чем просто растягивает элемент. Она показывает, что вы понимаете алгоритм на уровне реальной верстки.

У flex-элемента есть базовый размер. Его может задавать flex-basis, width, содержимое или сокращение flex. Свободное место считается после базовых размеров и после промежутков gap.

Например, контейнер шириной 600px, два элемента имеют базовые размеры 100px и 200px, а gap равен 20px. На сами элементы остается 580px. Базовые размеры занимают 300px, свободное место равно 280px. Если у обоих flex-grow: 1, каждый получит по 140px добавки. Итог будет 240px и 340px, а не две одинаковые колонки.

Если у первого flex-grow: 2, а у второго flex-grow: 1, свободные 280px делятся в пропорции 2 к 1. Первый получает большую добавку. Но расчет все равно начинается от базовых размеров.

В интерфейсах flex-grow чаще всего нужен для сценария занять остаток. Например, поле поиска рядом с кнопкой, основной контент рядом с сайдбаром, центральная область между левым и правым блоком. Это хороший выбор, когда вы хотите сохранить размер одних элементов и отдать свободное место другому.

Но если задача про сетку равных карточек, не отвечайте только через flex-grow. Скажите, что проверите стартовые размеры и, возможно, возьмете flex: 1 1 0 или CSS Grid. Так вы снижаете риск получить макет, где карточки почти равные, но ломаются на реальном контенте, длинных названиях товаров или изображениях без ограничений.

При flex-wrap: wrap свободное место распределяется по каждой строке отдельно. Поэтому карточки на первой строке и карточки на второй строке могут получить разные итоговые размеры, даже если у них одинаковый flex-grow.

Еще один нюанс. Значения могут быть дробными, например 0.5. Это не проценты, а коэффициенты. Браузер сравнивает их с коэффициентами соседних flex-элементов и делит свободное место пропорционально.

Отрицательные значения использовать нельзя. Такая декларация невалидна. Поэтому не стоит говорить, что flex-grow: -1 запрещает рост. Для запрета роста используйте flex-grow: 0 или сокращение вроде flex: 0 0 auto.