flex-shrink

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

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

        
          
          .container {  display: flex;}.item {  flex-shrink: 3;}
          .container {
  display: flex;
}

.item {
  flex-shrink: 3;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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