flex-shrinkProprietatea este o sub-proprietate a modulului flexibil Box Layout.
Specifică „factorul de micșorare flexibilă”, care determină cât de mult se va micșora elementul flexibil față de restul articolelor flexibile din containerul flexibil atunci când nu există suficient spațiu pe rând.
Când este omis, este setat la 1și factorul de micșorare flexibilă este înmulțit cu baza flexibilă la distribuirea spațiului negativ.
Sintaxă
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Pentru a vedea întregul potențial al acestei demonstrații, va trebui să îi puteți redimensiona lățimea, așa că vă rugăm să aruncați o privire direct pe CodePen.
În această demonstrație:
- Primul element are
flex: 1 1 20em(prescurtare pentruflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Al doilea element are
flex: 2 2 20em(prescurtare pentruflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Ambele articole flexibile vor să aibă o lățime de 20em. Datorită creșterii flexibile (primul parametru), dacă containerul flexibil este mai mare de 40em, al doilea copil va ocupa de două ori mai mult spațiu rămas decât primul copil. Dar dacă elementul părinte are o lățime mai mică de 40em, atunci al doilea copil va avea de două ori mai mult din el decât primul copil, făcându-l să pară mai mic (din cauza celui de-al doilea parametru, flex-shrink).
Suport pentru browser
- (modern) înseamnă sintaxa recentă din specificație (de exemplu
display: flex;) - (hibrid) înseamnă o sintaxă neoficială ciudată din 2011 (de exemplu
display: flexbox;) - (vechi) înseamnă sintaxa veche din 2009 (de exemplu
display: box;)
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (vechi) | 3.1+ (vechi) | 2-21 (vechi) 22+ (nou) | 12.1+ (modern) | 10+ (hibrid) | 2.1+ (vechi) | 3.2+ (vechi) |
Browserul Blackberry 10+ acceptă noua sintaxă.
Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, vă rugăm să consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).