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;
}