Свойство CSS flex-shrink
Свойство flex-shrink определяет, насколько элемент сжимается внутри flex-контейнера. Примеры и интерактивная демонстрация.
Свойство flex-shrink управляет тем, насколько flex-элемент сжимается относительно других элементов в том же контейнере при нехватке места для всех них в предпочтительных размерах. Оно работает только тогда, когда суммарный размер элементов превышает размер контейнера — этот излишек и есть «отрицательное пространство», которое распределяется за счёт сжатия элементов.
Значение задаётся безразмерным числом (flex-фактором), а не длиной. Большее число означает, что элемент уступает больше своей ширины (или высоты в колонке), чем соседи. По умолчанию значение равно 1, то есть все flex-элементы сжимаются с одинаковой скоростью. Установите 0, чтобы зафиксировать элемент на его flex-basis и запретить сжатие.
flex-shrink — это третье значение в сокращённом свойстве flex (flex: grow shrink basis) и одно из свойств CSS3.
При распределении отрицательного пространства фактор flex-shrink каждого элемента умножается на его flex-basis (или, если flex-basis равен auto, на размер содержимого элемента). Такое взвешивание означает, что более крупные элементы сжимаются сильнее, чем маленькие, даже при одинаковых факторах сжатия — это предотвращает коллапс маленького элемента до нуля, пока большой сохраняет свой размер.
Как вычисляется сжатие
Предположим, flex-контейнер имеет ширину 400px и содержит два элемента, чьи значения flex-basis в сумме дают 600px — то есть нужно поглотить 200px переполнения. Если оба элемента имеют одинаковый flex-basis в 300px, а их факторы сжатия равны 1 и 3, взвешенные доли составят 300×1 = 300 и 300×3 = 900, итого 1200. Каждый элемент отдаёт долю переполнения пропорционально своей доле:
- Элемент A убирает
200 × (300 / 1200) = 50px→ становится250px. - Элемент B убирает
200 × (900 / 1200) = 150px→ становится150px.
Таким образом, элемент с flex-shrink: 3 теряет в три раза больше ширины, чем элемент с flex-shrink: 1. Сумма итоговых ширин равна 400px контейнера.
Когда использовать flex-shrink
- Защита фиксированного элемента. Задайте боковой панели, логотипу или иконке
flex-shrink: 0, чтобы они сохраняли размер, пока гибкое содержимое вокруг них сжимается. - Приоритизация сжатия. Увеличьте фактор у менее важных элементов, чтобы они сворачивались раньше основного содержимого.
- Создание гибких панелей инструментов и навигации. Позвольте кнопкам сжиматься вместе по мере сужения viewport, вместо того чтобы вызывать переполнение или перенос. | Initial Value | 1 | |---|---| | Applies to | Flex items, including in-flow pseudo-elements. | | Inherited | No. | | Animatable | Yes. Items are animatable. | | Version | CSS3 | | DOM Syntax | object.style.flexShrink = "4"; |
Синтаксис
Синтаксис свойства CSS flex-shrink
flex-shrink: number | initial | inherit;Безразмерное число задаёт flex-фактор; initial сбрасывает его до 1, а inherit наследует значение родителя.
Пример свойства flex-shrink
В примере ниже все элементы начинают с flex-basis равного 100px (то есть 500px содержимого конкурируют за блок размером 320px). У второго элемента flex-shrink: 7, тогда как у остальных — 3, поэтому он сжимается более чем вдвое быстрее и оказывается самым узким.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px dotted #666666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 3;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 7;
}
</style>
</head>
<body>
<h2>Flex-shrink property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Результат
![Свойство CSS flex-shrink](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)
Запрет сжатия элемента
Установите flex-shrink: 0, чтобы элемент оставался на своём базовом размере, пока соседи поглощают всё переполнение. Здесь боковая панель сохраняет ширину 200px, а сжимается только область содержимого:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.layout {
display: flex;
width: 320px;
border: 1px dotted #666666;
}
.sidebar {
flex-basis: 200px;
flex-shrink: 0; /* never shrinks */
background-color: #1c87c9;
}
.content {
flex-basis: 200px;
flex-shrink: 1; /* shrinks to make room */
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
</body>
</html>Суммарный базовый размер двух элементов составляет 400px при контейнере 320px, значит нужно убрать 80px. Поскольку боковая панель отказывается сжиматься, область содержимого поглощает все 80px и отображается шириной 120px.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| number | Задаёт, насколько элемент сжимается относительно остальных гибких элементов того же контейнера. Значение по умолчанию — 1. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует это свойство от родительского элемента. |
Связанные свойства
flex-shrink редко используется в одиночку — оно является аналогом других свойств Flexbox для управления размером:
- flex-grow — насколько элемент растёт, чтобы занять лишнее пространство (противоположное направление).
- flex-basis — начальный размер элемента до применения роста или сжатия.
- flex — сокращение, устанавливающее
flex-grow,flex-shrinkиflex-basisодновременно. - flex-wrap — перенос элементов на новую строку вместо сжатия.
- flex-direction — направление сжатия: по строке (ширина) или по колонке (высота).