Что делает свойство flex-grow?

Что такое flex-grow?

Свойство flex-grow в CSS Flexbox определяет, как flex-элемент будет увеличиваться в размере, когда в контейнере есть свободное пространство. Оно принимает неотрицательное число, которое задает коэффициент роста элемента относительно других элементов.

Как это работает?

Когда flex-контейнер имеет дополнительное пространство (например, ширина контейнера больше суммы ширин всех элементов), это пространство распределяется между элементами пропорционально их flex-grow. Если всем элементам задать flex-grow: 1, они получат равные доли свободного пространства. Элемент с flex-grow: 2 получит в два раза больше дополнительного пространства, чем элемент с flex-grow: 1.

Пример кода

.container {
  display: flex;
  width: 600px;
}

.item1 {
  flex-grow: 1;
  background: lightblue;
}

.item2 {
  flex-grow: 2;
  background: lightcoral;
}

.item3 {
  flex-grow: 1;
  background: lightgreen;
}

В этом примере контейнер шириной 600px содержит три элемента. Если их базовые размеры равны 100px каждый, то общая ширина элементов — 300px, а свободное пространство — 300px. Оно делится на 4 части (1+2+1). Первый элемент получит 1 часть (75px), второй — 2 части (150px), третий — 1 часть (75px). Итоговые ширины: 175px, 250px, 175px.

Где применяется?

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

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