Свойство flex-shrink - "сжатие" отдельно взятого flex-блока в CSS
Свойство 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