В чем разница между Flex-Grow и Flex-Shrink

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

flex-grow:

• Определяет, как элемент будет увеличиваться относительно других, если есть свободное место.
• Значение по умолчанию: 0 (не растёт).
• Чем больше значение, тем больше элемент забирает свободного места.

flex-shrink:

• Определяет, как элемент будет уменьшаться, если места не хватает.
• Значение по умолчанию: 1 (сжимается).
• Чем больше значение, тем сильнее элемент сжимается.

Пример:

.container {
  display: flex;
}
.item1 {
  flex-grow: 1; /* Заберёт больше места */
}
.item2 {
  flex-shrink: 2; /* Сожмётся сильнее при нехватке места */
}