Атрибут CSS flex-shrink

  • предыдущая страница flex-grow
  • следующая страница flex-wrap

определение и использование

свойство flex-shrink установлено в одном и том же контейнере, степень сжатия элемента по отношению к другим эластичным элементам.

замечание:если элемент не является эластичным элементом, то свойство flex не действует.

еще см. также:

Урок CSS: CSS эластичный контейнер

Руководство по CSS:свойство flex

Руководство по CSS:свойство flex-basis

Руководство по CSS:свойство flex-direction

Руководство по CSS:свойство flex-flow

Руководство по CSS:свойство flex-grow

Руководство по CSS:свойство flex-wrap

Руководство по HTML DOM:свойство flexShrink

пример

сделать второй эластичный элемент сжаться в три раза по сравнению с другими элементами:

div:nth-of-type(2) {
  flex-shrink: 3;
}

попробуйте сами

синтаксис CSS

flex-shrink: number|initial|inherit;

значение свойства

значение описание
number число, определяющее степень сжатия элемента по отношению к другим эластичным элементам. Значение по умолчанию - 1.
initial установить это свойство в его значение по умолчанию. См. также initial.
inherit интерпретация этого свойства происходит от родительского элемента. См. также inherit.

технические детали

по умолчанию: 1
наследование: нет
создание анимации: поддерживается. См. также:свойства, связанные с анимацией.
версия: CSS3
JavaScript синтаксис: object.style.flexShrink="5"

поддержка браузеров

числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

числа с префиксами -webkit- или -moz- указывают на первую версию, которая использует префикс.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • предыдущая страница flex-grow
  • следующая страница flex-wrap