В flex-shrinkимота е под-собственост на модула гъвкави полета Разпределение на.
Той определя „коефициентът на свиване на гъвкавостта“, който определя колко ще се свие елементът на огъване спрямо останалите елементи на огъване в контейнера за огъване, когато няма достатъчно място на реда.
Когато се пропусне, той се задава на 1и коефициентът на свиване при огъване се умножава по основата на огъване при разпределяне на отрицателното пространство.
Синтаксис
flex-shrink: .flex-item ( flex-shrink: 2; )Демонстрация
За да видите пълния потенциал на тази демонстрация, трябва да можете да преоразмерите нейната ширина, така че, моля, погледнете я директно в CodePen.
В тази демонстрация:
- Първият елемент е
flex: 1 1 20em(съкращение заflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Вторият елемент е
flex: 2 2 20em(съкращение заflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
И двата гъвкави елемента искат да бъдат 20em широки. Поради гъвкавия растеж (първи параметър), ако гъвкавият контейнер е по-голям от 40em, второто дете ще отнеме два пъти повече остатъчно място от първото дете. Но ако родителският елемент е по-малък от 40em широк, тогава второто дете ще бъде избръснато два пъти повече от първото дете, което ще го направи по-малък (поради втория параметър, flex-shrink).
Поддръжка на браузър
- (модерно) означава скорошния синтаксис от спецификацията (напр.
display: flex;) - (хибрид) означава странен неофициален синтаксис от 2011 г. (напр.
display: flexbox;) - (стар) означава стария синтаксис от 2009 г. (напр.
display: box;)
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (модерен) 20- (стар) | 3.1+ (стари) | 2-21 (стар) 22+ (нов) | 12.1+ (модерен) | 10+ (хибридни) | 2.1+ (стари) | 3.2+ (стари) |
Браузърът Blackberry 10+ поддържа новия синтаксис.
За повече информация как да смесвате синтаксиси, за да получите най-добрата поддръжка на браузъра, моля, вижте тази статия (CSS-трикове) или тази статия (DevOpera).