flex-shrink¶
Свойство flex-shrink
устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
Flexbox и выравнивание
Руководство по Flexbox
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- order
Синтаксис¶
flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
Значения¶
Значение по-умолчанию: 1
Наследуется: нет
Применяется к флекс-элементам
Анимируется: да
<число>
- Принимаются целые числа. Отрицательные значения игнорируются.
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-flex-shrink
.
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex-shrink</title>
<style>
.flex-container {
display: flex;
}
.flex1 {
flex-shrink: 3;
margin-right: 2rem;
}
.flex1 img {
width: 100%;
}
.flex2 {
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item flex1">
<img src="aquaria.jpg" alt="" />
</div>
<div class="flex-item flex2">
Понравились готовые инсталляции, некоторые даже без
рыбок смотрятся так, что хочется фотографию на
рабочий стол поставить и любоваться.
</div>
</div>
</body>
</html>

Понравились готовые инсталляции, некоторые
даже без рыбок смотрятся так, что хочется фотографию на рабочий
стол поставить и любоваться.