flex-grow: распределение свободного места
flex-grow задаёт коэффициент, по которому flex-элемент получает долю положительного свободного места.
Назначение
flex-grow задаёт коэффициент, по которому flex-элемент получает долю положительного свободного места.
Как это работает
Коэффициент относится к добавляемому пространству, а не обязательно к итоговой ширине. На результат также влияют базовый размер, содержимое, ограничения min/max и свойства соседей.
Пример
<style>
.row{display:flex;gap:8px}.row>div{flex-basis:0;min-width:0;padding:12px;background:#eaf4ee}.a{flex-grow:1}.b{flex-grow:2}
</style>
<div class="row"><div class="a">Одна доля</div><div class="b">Две доли</div></div>Что должно получиться
После учёта промежутка доступное пространство распределяется с коэффициентами 1 и 2 при одинаковой нулевой базе. Отступы и границы также влияют на видимый размер.
Граница применения и частая ошибка
Соотношение grow 1 к 2 не гарантирует итоговые ширины 1 к 2 при разных базовых размерах. Для сравнения коэффициентов сначала задайте одинаковую базу.
Самостоятельная проверка
Измените ширину контейнера и сравните распределение. Затем добавьте разный flex-basis двум элементам: итоговое соотношение изменится, хотя grow останется прежним.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.