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

CSS-свойство flex-shrink указывает, как будет «сжиматься» flex-элемент относительно других элементов внутри flex-контейнера.

Значение по умолчанию:	`1`
Применяется к:	Flex-элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

flex-shrink: number | initial | inherit

Примеры написания кода свойства flex-shrink:

.flex-container {
    display: flex;
} 
.item1 {
    width: 100px;
    background: #ff80c0;
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
    flex-shrink: 1;
}
.item2 {
    width: 100px;
    background: #8080ff;
    -webkit-flex-shrink: 3; /* Safari 6.1+ */
    flex-shrink: 3;
}
.item3 {
    width: 100px;
    background:#0080ff;
    -webkit-flex-shrink: 5; /* Safari 6.1+ */
    flex-shrink: 5;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
number	Коэффициент flex-shrink flex-элемента. Значение по умолчанию равно 1. Отрицательные числа недопустимы.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `flex-shrink`.