Что делает flex-shrink?

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

Flex-shrink — это свойство CSS, которое управляет способностью flex-элемента уменьшаться в размере, когда все элементы вместе не помещаются в flex-контейнер. Оно работает в паре с flex-grow (увеличение) и flex-basis (базовый размер). По умолчанию flex-shrink равен 1, что означает, что элемент может сжиматься пропорционально своему базовому размеру.

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

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

Пример кода

.container {
  display: flex;
  width: 300px;
}
.item1 {
  flex-basis: 200px;
  flex-shrink: 1; /* будет сжиматься */
}
.item2 {
  flex-basis: 200px;
  flex-shrink: 2; /* сожмется сильнее */
}
.item3 {
  flex-basis: 200px;
  flex-shrink: 0; /* не будет сжиматься */
}

В этом примере общая ширина элементов 600px, а контейнер — 300px. Нехватка места — 300px. Элемент .item3 не сжимается, поэтому .item1 и .item2 делят оставшееся переполнение (300px) пропорционально своим flex-shrink: .item1 получит 1/3 (100px), .item2 — 2/3 (200px).

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

Flex-shrink полезен при создании адаптивных макетов, где элементы должны подстраиваться под размер экрана, не выходя за границы контейнера. Например, в карточках товаров или навигационных панелях.

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