Свойство flex-shrink

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

Например, если все flex-блоки внутри flex-контейнера имеют flex-shrink:1, то они будут одинакового размера. Если один из них имеет flex-shrink:2, то он будет в 2 раза меньше, чем все остальные.

Применяется к: конкретному flex блоку.

Данное свойство входит как составная часть в свойство-сокращение flex.

Синтаксис

селектор {
	flex-shrink: положительное число;
}

Значение по умолчанию: 1.

Пример

Пусть у нас есть 3 элемента. Ширина каждого из них составляет 200px и суммарно равна 600px, что больше ширины родительского контейнера, которая равна 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

Давайте рассчитаем отрицательное свободное пространство по формуле:

600px - 350px = 250px

Суммарная взвешенная ширина элементов с учетом значений свойства flex-shrink для каждого элемента будет равна:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Теперь определим насколько сократится первый элемент:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Второй элемент:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Третий элемент:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Выходит, что третий элемент, у которого значение flex-shrink равно 3 сократится больше других элементов.

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

свойство flex-direction,
которое задает направление осей flex блоков
свойство justify-content,
которое задает выравнивание по главной оси
свойство align-items,
которое задает выравнивание по поперечной оси
свойство flex-wrap,
которое многострочность flex блоков
свойство flex-flow,
сокращение для flex-direction и flex-wrap
свойство order,
которое задает порядок flex блоков
свойство align-self,
которое задает выравнивание одного блока
свойство flex-basis,
которое задает размер конкретного flex блока
свойство flex-grow,
которое задает жадность flex блоков
свойство flex,
сокращение для flex-grow, flex-shrink и flex-basis