flex-shrink

Как будет сжиматься флекс-элемент если места мало.

Время чтения: меньше 5 мин

Кратко

Скопировано

Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex-shrink указывает, в каких пропорциях элемент будет уменьшаться.

Свойство flex-shrink полностью противоположно свойству flex-grow.

Пример

Скопировано
        
          
          .container {  display: flex;}.item {  flex-shrink: 3;}
          .container {
  display: flex;
}

.item {
  flex-shrink: 3;
}

        
        
          
        
      

Как понять

Скопировано

Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.

Как пишется

Скопировано

Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

Подсказки

Скопировано

💡 Свойство работает с пропорциональным разделением пространства, не с конкретными размерами элементов. Разобраться во всём поможет статья «Как реально работает flex-shrink».

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Чаще всего в работе используется flex-shrink: 0. Это нужно чтобы элементы не сжимались, игнорируя заданные размеры.