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».

На практике

Секция статьи "На практике"