Tato flex-shrinkvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.
Určuje „faktor zmenšení flexe“, který určuje, o kolik se položka flex zmenší vzhledem ke zbytku položek flex v kontejneru flex, když na řádku není dostatek místa.
Když je vynechán, je nastaven na 1a faktor zmenšení flexe se při distribuci negativního prostoru vynásobí flex základem.
Syntax
flex-shrink: .flex-item ( flex-shrink: 2; )Ukázka
Chcete-li vidět plný potenciál tohoto dema, budete muset být schopni změnit jeho šířku, takže se na něj prosím podívejte přímo na CodePen.
V této ukázce:
- První položka
flex: 1 1 20em(zkratka proflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Druhá položka
flex: 2 2 20em(zkratka proflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Obě položky flex chtějí mít šířku 20 metrů. Kvůli flex-grow (první parametr), je-li flex kontejner větší než 40em, druhé dítě zabírá dvakrát tolik zbylého místa než první dítě. Pokud je však nadřazený prvek široký méně než 40 m, potom bude mít druhé dítě dvakrát tolik oholeného než první dítě, takže bude vypadat menší (kvůli 2. parametru, flex-shrink).
Podpora prohlížeče
- (moderní) znamená nedávnou syntaxi ze specifikace (např.
display: flex;) - (hybrid) znamená lichou neoficiální syntaxi z roku 2011 (např.
display: flexbox;) - (old) znamená starou syntaxi z roku 2009 (např.
display: box;)
| Chrome | Safari | Firefox | Opera | TJ | 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ý) |
Prohlížeč Blackberry 10+ podporuje novou syntaxi.
Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (CSS-Tricks) nebo v tomto článku (DevOpera).