Az flex-shrinkingatlan a Flexible Box Layout modul egyik al-tulajdonsága.
Megadja a „flex zsugorodási tényezőt”, amely meghatározza, hogy a flex elem mennyivel fog zsugorodni a flex tárolóban lévő többi flex elemhez képest, ha nincs elég hely a sorban.
Ha kihagyja, akkor a 1negatív tér elosztásakor a -ra állítja, és a rugalmas zsugorodási tényezőt megszorozza a rugalmas bázissal.
Szintaxis
flex-shrink: .flex-item ( flex-shrink: 2; )Demó
A bemutató teljes potenciáljának megtekintéséhez képesnek kell lennie a szélességének átméretezésére, ezért kérjük, nézze meg közvetlenül a CodePen oldalon.
Ebben a bemutatóban:
- Az első elem van
flex: 1 1 20em(rövidítéseflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - A második elem van
flex: 2 2 20em(rövidítéseflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Mindkét flex elem 20em széles lehet. A flex-grow (első paraméter) miatt, ha a flex tartály nagyobb, mint 40em, a 2. gyermek kétszer annyi helyet foglal el, mint az első gyermek. De ha a szülő elem szélessége nem éri el a 40em értéket, akkor a 2. gyermek kétszer annyit lesz borotválva, mint az 1. gyermek, így kisebbnek tűnik (a 2. paraméter miatt flex-shrink).
Böngésző támogatás
- (modern): a specifikáció legújabb szintaxisa (pl.
display: flex;) - (hibrid) furcsa, nem hivatalos szintaxist jelent 2011-től (pl.
display: flexbox;) - (régi) a 2009-es régi szintaxist jelenti (pl.
display: box;)
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20 - (régi) | 3.1+ (régi) | 2–21 (régi) 22+ (új) | 12,1+ (modern) | 10+ (hibrid) | 2.1+ (régi) | 3,2+ (régi) |
A Blackberry 10+ böngésző támogatja az új szintaxist.
A szintaxisok keverésével kapcsolatos további információkért a legjobb böngésző-támogatás érdekében olvassa el ezt a cikket (CSS-trükkök) vagy ezt a cikket (DevOpera).