flex-shrinkИмовина је под-својство Флексибилна кутија Лаиоут модула.
Одређује „фактор савијања“, који одређује колико ће се елемент савијања смањити у односу на остатак елемената савитљивости у флекс контејнеру када нема довољно простора на реду.
Када се изостави, подешава се на, 1а фактор савијања при помицању помножава се са основама савијања при дистрибуцији негативног простора.
Синтакса
flex-shrink: .flex-item ( flex-shrink: 2; )Демо
Да бисте видели пуни потенцијал овог демо-а, морали бисте моћи да му промените величину, па га погледајте директно на ЦодеПен-у.
У овој демонстрацији:
- Прва ставка је
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)
Оба флексибилна предмета желе да буду широка 20ем. Због флекс-раста (први параметар), ако је флекс-контејнер већи од 40ем, 2. детету ће бити потребно двоструко више преосталог простора од првог детета. Али ако је родитељски елемент широк мање од 40ем, тада ће се друго дете обријати двоструко више од првог детета, чинећи га тако мањим (због другог параметра, флек-схринк).
Подршка прегледача
- (модерно) значи недавну синтаксу из спецификације (нпр.
display: flex;) - (хибрид) значи чудну незваничну синтаксу из 2011. године (нпр.
display: flexbox;) - (стара) значи стара синтакса из 2009. године (нпр.
display: box;)
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 21+ (модерно) 20- (старо) | 3,1+ (старо) | 2-21 (стари) 22+ (нови) | 12,1+ (модерно) | 10+ (хибридно) | 2,1+ (старо) | 3,2+ (стара) |
Прегледач Блацкберри 10+ подржава нову синтаксу.
За више информација о томе како мешати синтаксе како бисте добили најбољу подршку за прегледач, погледајте овај чланак (ЦСС-трикови) или овај чланак (ДевОпера).