CSS свойство flex-shrink

Определяет коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов внутри контейнера. Работает только если для элемента задана ширина с помощью свойства flex-basis или width.

CSS синтаксис

flex-shrink: число | initial | inherit;

Возможные значения

ЗначениеОписание
числоПоложительное целое или дробное число, устанавливающее коэффициент уменьшения флекс-элемента. Значение по умолчанию 1.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем, чтобы ширина каждого второго флекс-элемента была в три раза меньше остальных


/* Safari 6.1+ */
div:nth-of-type(2) {
    -webkit-flex-shrink: 3; 
} 

/* Стандартный синтаксис */
div:nth-of-type(2) {
    flex-shrink: 3;
}