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

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

Попробуйте

flex-shrink: 0;

flex-shrink: 1;

flex-shrink: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I shrink</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}

Синтаксис

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

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

Значения

Это свойство задаётся следующим значением:

<number>

См. <number>. Отрицательные значения недопустимы. Значение по умолчанию — 1.

Описание

Свойство flex-shrink задаёт коэффициент сжатия флекс-элемента, который определяет, насколько сильно элемент будет сжиматься относительно остальных флекс-элементов во флекс-контейнере при распределении отрицательного свободного пространства.

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

Свойство flex-grow распределяет доступное положительное свободное пространство пропорционально коэффициенту роста каждого элемента, учитывая только значение свойства flex-grow. Свойство flex-shrink управляет устранением отрицательного свободного пространства, чтобы блоки поместились в контейнер и не выходили за его границы. Устранение свободного пространства немного сложнее, чем его добавление. Коэффициент сжатия умножается на базовый размер флекс-элемента; таким образом отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться. Это не позволяет меньшим элементам сжиматься до 0px до того, как размер более крупного элемента заметно уменьшится.

Как правило, flex-shrink используется вместе со свойствами flex-grow и flex-basis. В сокращённой записи flex коэффициент сжатия всегда является вторым <number>. Если сокращённая запись содержит только одно числовое значение, оно считается значением flex-grow.

Формальное определение

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

flex-shrink = 
  <number>

Примеры

Задание коэффициента сжатия флекс-элемента

В этом примере показано, как отрицательное свободное пространство распределяется в зависимости от коэффициента сжатия элемента. В нём используются пять флекс-элементов со значением flex-shrink больше 0; их суммарная ширина превышает ширину родительского флекс-контейнера.

HTML

<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
</div>

CSS

Для каждого флекс-элемента задаётся width равная 200px. Поскольку для свойства flex-basis по умолчанию задано значение auto, flex-basis каждого элемента равен 200px. В результате суммарная ширина флекс-элементов составляет 1000px, то есть вдвое больше ширины контейнера. Для всех флекс-элементов задаётся возможность сжатия, а значения flex-shrink устанавливаются больше 0. Для двух последних элементов задаются более высокие значения flex-shrink, поэтому они будут сжиматься сильнее.

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

#content div {
  width: 200px;
}

.box1,
.box2,
.box3 {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

#content {
  margin: 5px;
}
div {
  font-family: monospace;
  outline: 1px solid;
  line-height: 4em;
  text-align: center;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: lightsalmon;
}
.box5 {
  background-color: lightgreen;
}

Результат

Флекс-элементы не выходят за границы контейнера, поскольку могут сжиматься: 500px отрицательного свободного пространства распределяется между пятью элементами на основе их значений flex-shrink. Сумма всех значений сжатия для пяти элементов равна 1 + 1 + 1 + 1.5 + 2 = 6.5. В результате ширина элементов со значением flex-shrink: 1 уменьшается на 1/6.5 * 500px = 76.92px, ширина элементов со значением flex-shrink: 1.5 уменьшается на 1.5/6.5 * 500px = 115.38px, а ширина элементов со значением flex-shrink: 2 уменьшается на 2/6.5 * 500px = 153.85px.

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

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

См. также

• Основные понятия flexbox
• Управление соотношениями флекс-элементов вдоль главной оси
• Модуль компоновки CSS Flexible Box