Свойство flex-shrink
Устанавливает коэффициент сжатия элемента контейнера flexbox
flex-shrink: 1;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-shrink: 0;
Элемент не будет уменьшаться, он сохранит нужную ему ширину и не будет переносить содержимое, если размеры элемента не заданы. Его родные братья сократятся, чтобы освободить место для целевого элемента.
Существует вероятность переполнения содержимого контейнера flexbox, если для него не задан flex-wrap: wrap;
<style>
.example-1 {
display: flex;
outline: 2px dashed #ccc;
}
.example-1-item {
padding: 5px;
margin: 2px;
background: #8ee391;
}
.shrink-0 {
width: 330px;
flex-shrink: 0;
}
</style>
<div class="example-1">
<div class="example-1-item shrink-0">текст текст текст</div>
<div class="example-1-item">текст текст</div>
<div class="example-1-item">текст</div>
</div>flex-shrink: 1;
Элемент будет сжиматься при необходимости
<style>
.example-2 {
display: flex;
outline: 2px dashed #ccc;
}
.example-2-item {
flex-shrink: 1;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-2">
<div class="example-2-item">текст текст текст текст текст текст</div>
<div class="example-2-item">текст текст текст текст текст текст</div>
<div class="example-2-item">текст текст текст текст текст текст</div>
</div>flex-shrink: 2;
Значение flex-shrink является относительным, его поведение зависит от значения родственных элементов контейнера flexbox.
Если в контейнере находятся три элемента, один из них пытается занять много пространства, у второго flex-shrink: 1; а у третьего flex-shrink: 2; Необходимое, первому элементу, пространство будет взято от элемента с flex-shrink: 2; в два раза больше чем от элемента с flex-shrink: 1;
<style>
.example-3 {
display: flex;
outline: 2px dashed #ccc;
}
.example-3-item {
flex-shrink: 0;
padding: 5px;
margin: 2px;
background: #8ee391;
}
.shrink-1 {
flex-shrink: 1;
}
.shrink-2 {
flex-shrink: 2;
}
</style>
<div class="example-3">
<div class="example-3-item">текст текст текст текст текст текст</div>
<div class="example-3-item shrink-1">текст текст текст текст текст текст</div>
<div class="example-3-item shrink-2">текст текст текст текст текст текст</div>
</div>