Что делает свойство Flex-Grow

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

• Значение по умолчанию: 0 (элемент не растягивается).
• Если у всех элементов flex-grow: 1, они займут равное пространство.
• Если у одного элемента значение больше (например, 2), он займёт в 2 раза больше места, чем остальные.

Пример:

.container {
  display: flex;
}
.item1 {
  flex-grow: 1; /* Займёт 1 часть свободного места */
}
.item2 {
  flex-grow: 2; /* Займёт 2 части */
}

Если в контейнере осталось 300px свободного места, item1 получит 100px, item2 — 200px.