MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

Возможность 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 для большей информации.

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

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

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