--- title: flex-shrink slug: Web/CSS/flex-shrink translation_of: Web/CSS/flex-shrink ---
{{CSSRef}}

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

flex-shrink используется вместе со свойствами flex {{cssxref("flex-grow")}} и {{cssxref("flex-basis")}}. Обычно определяется с помощью сокращения {{cssxref("flex")}}.

{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}

Синтаксис

/* <number> значения */
flex-shrink: 2;
flex-shrink: 0.6;

/* Глобальное значение */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

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

Значения

<number>
Смотри {{cssxref("<number>")}}. Отрицательные значения не валидны.

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

{{csssyntax}}

Пример

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

Результат

{{ EmbedLiveSample('Пример', '500px', '300px', '', 'Web/CSS/flex-shrink') }}

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

Спецификация Статус Комментарий
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }} {{ Spec2('CSS3 Flexbox') }} Изначальное определение

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

{{Compat("css.properties.flex-shrink")}}

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