Táto flex-shrinkvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.
Určuje „faktor zmenšenia flexi“, ktorý určuje, o koľko sa položka flex zmenší v porovnaní so zvyškom položiek flex v kontajneri flex, ak na riadku nie je dostatok miesta.
Ak sa vynechá, nastaví sa na 1a faktor zmenšenia ohybu sa pri distribúcii záporného priestoru vynásobí ohybovou bázou.
Syntax
flex-shrink: .flex-item ( flex-shrink: 2; )Ukážka
Ak chcete vidieť celý potenciál tohto ukážky, museli by ste byť schopní zmeniť veľkosť jeho šírky, takže si ju priamo pozrite v aplikácii CodePen.
V tejto ukážke:
- Prvá položka
flex: 1 1 20em(skratka preflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Druhá položka
flex: 2 2 20em(skratka preflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Obidve položky flex chcú mať šírku 20 m. Z dôvodu flex-grow (prvý parameter), ak je kontajner flex väčší ako 40em, druhé dieťa zaberie dvakrát toľko zvyšného priestoru ako prvé dieťa. Ale ak je nadradený prvok široký menej ako 40 m, potom bude mať druhé dieťa z neho oholené dvakrát toľko ako prvé dieťa, takže bude vyzerať menší (kvôli 2. parametru, zmenšeniu).
Podpora prehľadávača
- (moderný) znamená nedávnu syntax zo špecifikácie (napr.
display: flex;) - (hybrid) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr.
display: flexbox;) - (staré) znamená starú syntax z roku 2009 (napr.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderný) 20- (starý) | 3.1+ (staré) | 2-21 (staré) 22+ (nové) | 12.1+ (moderný) | 10+ (hybridný) | 2.1+ (staré) | 3.2+ (staré) |
Prehliadač Blackberry 10+ podporuje novú syntax.
Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).