flex-shrink

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

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

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

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

Свойство flex-shrink задаётся как одно <number>.

<number>

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

flex-shrink = 
  <number [0,∞]>  

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

HTML

<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="box4" style="background-color:lightsalmon;">D</div>
  <div class="box5" style="background-color:lightgreen;">E</div>
</div>

CSS

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

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

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

Результат

Flex элементы не выходят за пределы контейнера, потому что они могут сжиматься: 500px отрицательного свободного пространства распределяется между пятью элементами в соответствии со значениями flex-shrink. У первых трёх элементов установлено значение flex-shrink: 1. У элемента D значение flex-shrink: 1.5, а у элемента E значение flex-shrink: 2. Конечная ширина D и E меньше, чем у других, причём E меньше, чем D.

• Основные понятия flexbox
• Управление отношениями flex элементов вдоль основной оси
• CSS flexible box layout модуль