Что такое Flex-Grow

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

Как работает:

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

Пример:

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

Нюансы:

• Работает только с положительным свободным пространством.
• Не влияет на размеры, если контейнер заполнен.
• Если все элементы имеют flex-grow: 1, пространство делится поровну.