flex-shrink — свойство CSS, которое определяет фактор сжатия  flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink, когда стандартная ширина flex-элементов шире, чем flex-контейнер.
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

Начальное значение1
Применяется кflex-элементы, в том числе в потоке псевдоэлементов
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typeчисло
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Смотри Using CSS flexible boxes о других свойствах и информации.

Синтаксис

flex-shrink свойство определятся одним <number>.

Значения

<number>
Смотри <number>. Отрицательные значения не валидны.

Формальный синтаксис

<number>

Пример

HTML

<p>Ширина контента 500px; flex-basis для flex элементов 120px.</p>
<p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2</p>
<p>Ширина D и E меньше других.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

CSS

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Flexible Box Layout Module
Определение 'flex-shrink' в этой спецификации.
Кандидат в рекомендации Initial definition

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Базовая поддержка 18.0 (18.0)[1]
32.0 (32.0)[2]
21.0-webkit (Да)-webkit
(Да)
10[3] 12.10 8.0-webkit
Возможность Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Базовая поддержка 18.0 (18.0)[1]
32.0 (32.0)[2]
? (Да)-webkit
(Да)
Нет 12.10 Нет

[1] Firefox поддерживает только flexbox в одну линию до Firefox 27. Для активации flexbox поддержку, в Firefox 18 и 19, пользователь должен изменить  about:config предпочтение layout.css.flexbox.enabled к значению true.

В дополнение для безпрефиксной поддержки Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) добавило поддержку для -webkit префиксной верссии свойства для веб совместимости, для тех кто не изменял значение своих настроек layout.css.prefixes.webkit, по-умолчанию false. Поскольку Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) предпочтительное значение по-умолчанию true.

[2] До Firefox 32, Gecko не могло анимировать значения начинающиеся или заканчивающиеся 0(Spec, Demo).

[3] Internet Explorer 10 использует 0 вместо 1 для первоначального значения flex-shrink свойства. Временное решение всегда указывать явное значение flex-shrink. Смотри Flexbug #6 для большей информации.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: zbralex, fscholz, mhaidamashko
 Обновлялась последний раз: zbralex,