flex — shrink
Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.
Свойство flex — shrink полностью противоположно свойству flex — grow .
Пример
Скопировать ссылку «Пример» Скопировано
.container display: flex;> .item flex-shrink: 3;>.container display: flex; > .item flex-shrink: 3; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство работает с пропорциональным разделением пространства, не с конкретными размерами элементов. Разобраться во всём поможет статья «Как реально работает flex — shrink ».
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 59, поддерживается 59
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 11, поддерживается 11
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Чаще всего в работе используется flex — shrink : 0 . Это нужно чтобы элементы не сжимались, игнорируя заданные размеры.
flex-shrink
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .
flex-shrink — свойство CSS, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink , когда стандартная ширина flex-элементов шире, чем flex-контейнер.
flex-shrink используется вместе со свойствами flex flex-grow и flex-basis . Обычно определяется с помощью сокращения flex .
Интерактивный пример
Синтаксис
/* значения */ flex-shrink: 2; flex-shrink: 0.6; /* Глобальные значения */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
flex-shrink свойство определятся одним .
Значения
Формальный синтаксис
flex-shrink =
Пример
HTML
p>Ширина контента 500px; flex-basis для flex элементов 120px.p> p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2p> p>Ширина D и E меньше других.p> div id="content"> div class="box" style="background-color:red;">Adiv> div class="box" style="background-color:lightblue;">Bdiv> div class="box" style="background-color:yellow;">Cdiv> div class="box1" style="background-color:brown;">Ddiv> div class="box1" style="background-color:lightgreen;">Ediv> div>
CSS
#content display: flex; width: 500px; > #content div flex-basis: 120px; border: 3px solid rgba(0, 0, 0, 0.2); > .box flex-shrink: 1; > .box1 flex-shrink: 2; >
Результат
Спецификации
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |
flex-shrink¶
Свойство flex-shrink устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
Демо¶
Flexbox и выравнивание
Синтаксис¶
1 2 3 4 5 6 7
flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset; Значения¶
Значение по-умолчанию: 1
Применяется к флекс-элементам
Принимаются целые числа. Отрицательные значения игнорируются.
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-flex-shrink .
Спецификации¶
Поддержка браузерами¶
Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.
Описание и примеры¶
HTML Результат
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
html> head> meta charset="utf-8" /> title>flex-shrinktitle> 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> 
Понравились готовые инсталляции, некоторые даже без рыбок смотрятся так, что хочется фотографию на рабочий стол поставить и любоваться.
См. также¶
Свойство flex-shrink
Элемент не будет уменьшаться, он сохранит нужную ему ширину и не будет переносить содержимое, если размеры элемента не заданы. Его родные братья сократятся, чтобы освободить место для целевого элемента.
Существует вероятность переполнения содержимого контейнера flexbox, если для него не задан flex-wrap: wrap;
.example-1 < display: flex; outline: 2px dashed #ccc; >.example-1-item < padding: 5px; margin: 2px; background: #8ee391; >.shrink-0текст текст тексттекст текст
flex-shrink: 1;Элемент будет сжиматься при необходимости
.example-2 < display: flex; outline: 2px dashed #ccc; >.example-2-itemтекст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
flex-shrink: 2;Значение flex-shrink является относительным, его поведение зависит от значения родственных элементов контейнера flexbox.
Если в контейнере находятся три элемента, один из них пытается занять много пространства, у второго flex-shrink: 1; а у третьего flex-shrink: 2; Необходимое, первому элементу, пространство будет взято от элемента с flex-shrink: 2; в два раза больше чем от элемента с flex-shrink: 1;
.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текст текст текст текст текст тексттекст текст текст текст текст текст