Как работает свойство flex-shrink в CSS?

Свойство flex-shrink в CSS определяет, насколько flex-элемент будет уменьшаться относительно других элементов внутри flex-контейнера при недостатке свободного места. sky.pro code.mu

По умолчанию значение flex-shrink равно 1, что означает, что все элементы в контейнере сжимаются пропорционально своему размеру. sky.pro

Если установить flex-shrink: 0, элемент не будет сжиматься вообще. sky.pro

Значения больше 1 заставляют элемент сжиматься быстрее, чем его соседи. sky.pro

Для расчёта фактического сжатия браузер использует специальную формулу, которая учитывает не только коэффициент flex-shrink, но и размер самого элемента. sky.pro

Формула расчёта доли сжатия для каждого элемента: sky.pro

1. Сначала браузер вычисляет «фактор сжатия» каждого элемента, умножая его flex-shrink на размер (flex-basis или width). sky.pro
2. Затем суммирует все факторы сжатия элементов в контейнере. sky.pro
3. Далее определяет, насколько нужно сжаться всем элементам вместе (избыток ширины). sky.pro
4. И наконец, распределяет сжатие пропорционально вычисленным факторам. sky.pro

Flex-shrink работает только при соблюдении двух условий: элемент должен находиться внутри контейнера с display: flex, и общая ширина содержимого должна превышать ширину контейнера. sky.pro Если места достаточно для всех элементов, flex-shrink не оказывает видимого эффекта. sky.pro