This page was translated from English by the community.Learn more and join the MDN Web Docs community.
flex-shrink
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
flex-shrink — свойствоCSS, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значенияflex-shrink, когда стандартная ширина flex-элементов шире, чем flex-контейнер.
flex-shrink используется вместе со свойствами flexflex-grow иflex-basis. Обычно определяется с помощью сокращенияflex.
Интерактивный пример
flex-shrink: 0;flex-shrink: 1;flex-shrink: 2;<section> <div>I shrink</div> <div>Item Two</div> <div>Item Three</div></section>.default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex;}.default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px;}Синтаксис
css
/* <number> значения */flex-shrink: 2;flex-shrink: 0.6;/* Глобальные значения */flex-shrink: inherit;flex-shrink: initial;flex-shrink: unset;flex-shrink свойство определятся одним<number>.
Значения
Формальный синтаксис
flex-shrink =
<number [0,∞]>
Пример
HTML
html
<p>Ширина контента 500px; flex-basis для flex элементов 120px.</p><p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2</p><p>Ширина D и E меньше других.</p><div> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div></div>CSS
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 |