Ši flex-shrinknuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.
Jame nurodomas „lankstaus susitraukimo faktorius“, kuris nustato, kiek lankstus elementas sumažės, palyginti su likusiais lankstaus elemento elementais, kai eilutėje nėra pakankamai vietos.
Kai jis praleidžiamas, jis nustatomas 1ir paskirstant neigiamą erdvę lankstumo susitraukimo koeficientas padauginamas iš lankstumo pagrindo.
Sintaksė
flex-shrink: .flex-item ( flex-shrink: 2; )Demonstracija
Norėdami pamatyti visą šio demonstracinio varianto potencialą, turėtumėte sugebėti pakeisti jo pločio dydį, todėl pažvelkite į jį tiesiogiai „CodePen“.
Šioje demonstracinėje versijoje:
- Pirmasis elementas turi
flex: 1 1 20em(sutrumpinimasflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Antrasis elementas turi
flex: 2 2 20em(sutrumpinimasflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Abu lankstūs elementai nori būti 20 mm pločio. Dėl lankstaus augimo (pirmasis parametras), jei lankstus konteineris yra didesnis nei 40em, antrasis vaikas užims dvigubai daugiau vietos, kiek liko pirmasis vaikas. Bet jei tėvų elementas yra mažesnis nei 40em pločio, antrasis vaikas bus dvigubai daugiau nusiskutęs nei pirmasis vaikas, todėl jis atrodys mažesnis (dėl 2-ojo parametro „flex-shrink“).
Naršyklės palaikymas
- (moderni) reiškia naujausią sintaksę iš specifikacijos (pvz.
display: flex;) - (hibridas) reiškia nelyginę neoficialią sintaksę nuo 2011 m. (pvz.
display: flexbox;) - (senas) reiškia seną sintaksę nuo 2009 m. (pvz.
display: box;)
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 21+ (modernus) 20- (senas) | 3.1+ (senas) | 2–21 (senas) 22+ (naujas) | 12.1+ (moderni) | 10+ (hibridas) | 2.1+ (senas) | 3,2+ (senas) |
„Blackberry“ naršyklė 10+ palaiko naują sintaksę.
Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, žr. Šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).