flex-grow: расширение

flex-grow задаёт коэффициент роста flex-элемента: какую долю свободного пространства контейнера он должен занять сверх своего базового размера.

Зачем нужно

По умолчанию flex-элементы занимают ровно столько места, сколько требует их содержимое, а свободное пространство остаётся пустым. flex-grow позволяет "раздать" это пространство элементам пропорционально их коэффициентам. Это основа для равных колонок, гибкого контента и раскладок вида "сайдбар + основной блок".

Где используется

  • Равные колонки: flex-grow: 1 у всех
  • Главный блок занимает всё оставшееся пространство
  • Поле ввода в форме вытягивается, кнопка остаётся фиксированной

Синтаксис и значения

.item {
  flex-grow: 0; /* по умолчанию — не растёт */
  flex-grow: 1; /* занимает долю свободного пространства */
  flex-grow: 2; /* занимает вдвое больше, чем элемент с flex-grow: 1 */
}

Примеры

Элемент заполняет оставшееся пространство

.search-bar {
  display: flex;
  gap: 8px;
}
.search-bar input {
  flex-grow: 1; /* растёт, занимает всё свободное место */
}
.search-bar button {
  flex-grow: 0; /* фиксированный размер по контенту */
}

<div class="search-bar">
  <input type="text" placeholder="Поиск...">
  <button>Найти</button>
</div>

Пропорциональное распределение

.container {
  display: flex;
  width: 600px; /* пусть базовый размер всех элементов = 0 */
}
.item-a { flex: 1; } /* получит 200px (1/3 от 600px) */
.item-b { flex: 2; } /* получит 400px (2/3 от 600px) */

Равные колонки

.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex-grow: 1; /* или просто flex: 1 */
}

<div class="columns">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Колонка 3</div>
</div>

Сайдбар + основной контент

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 250px; /* grow=0, фиксированный */
}
.content {
  flex-grow: 1; /* занимает остаток */
}

Как вычисляется рост

Свободное пространство = ширина контейнера − сумма flex-basis всех элементов. Прирост элемента = свободное пространство × (его flex-grow / сумма всех flex-grow).

Частые ошибки

  1. flex-grow: 1 не даёт равных размеров при flex-basis: auto — если у элементов разный контент, они получат разный итоговый размер. Для истинно равных — нужен flex: 1 (basis=0%)
  2. flex-grow применён к контейнеру — работает только на flex-элементах
  3. Ожидание роста без свободного пространства — если контейнер не шире суммы элементов, расти некуда

Связанные темы

Ресурсы