Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
Краткая информация
Значение по умолчанию
1
Наследуется
Нет
Применяется
К флекс-элементам
Анимируется
Да
Синтаксис
flex-shrink: <число>
Синтаксис
Описание
Пример
<тип>
Указывает тип значения.
<размер>
A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,<время>]*
+
Повторять один или больше раз.
<число>+
?
Указанный тип, слово или группа не является обязательным.
inset?
{A, B}
Повторять не менее A, но не более B раз.
<радиус>{1,4}
#
Повторять один или больше раз через запятую.
<время>#
Значения
Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.
Пример
Код примера скопирован в буфер
<!DOCTYPE html><html><head><metacharset="utf-8"><title>flex-shrink</title><style>.flex-container {
display: flex;
}
.flex1 {
flex-shrink: 3;
margin-right: 2rem;
}
.flex1img {
width: 100%;
}
.flex2 {
flex-shrink: 2;
}
</style></head><body><divclass="flex-container"><divclass="flex-item flex1"><imgsrc="image/aquaria.jpg"alt=""></div><divclass="flex-item flex2">Понравились готовые инсталляции, некоторые
даже без рыбок смотрятся так, что хочется фотографию на рабочий
стол поставить и любоваться.</div></div></body></html>
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-shrink.
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
11
13
29
12.1
6.1
9
28
4.4
28
12.1
7.1
9.2
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.