flex-shrinkNieruchomość jest sub-property modułu Flexible Box Layout.
Określa „współczynnik kurczenia elastyczności”, który określa, o ile element flex zmniejszy się w stosunku do pozostałych elementów w kontenerze flex, gdy w wierszu nie ma wystarczającej ilości miejsca.
Gdy jest pominięty, jest ustawiony na, 1a współczynnik kurczenia się przy zginaniu jest mnożony przez podstawę elastyczności podczas dystrybucji przestrzeni ujemnej.
Składnia
flex-shrink: .flex-item ( flex-shrink: 2; )Próbny
Aby zobaczyć pełny potencjał tego demo, musiałbyś mieć możliwość zmiany jego szerokości, więc spójrz na to bezpośrednio w CodePen.
W tym demo:
- Pierwszy element ma
flex: 1 1 20em(skrótemflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Drugi element ma
flex: 2 2 20em(skrótemflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Oba elementy flex chcą mieć szerokość 20em. Ze względu na flex-grow (pierwszy parametr), jeśli elastyczny pojemnik jest większy niż 40em, drugie dziecko zajmie dwa razy więcej miejsca niż pierwsze dziecko. Ale jeśli element nadrzędny jest mniejszy niż 40em szerokości, wówczas drugie dziecko zostanie ogolone dwa razy bardziej niż pierwsze dziecko, dzięki czemu będzie wyglądało na mniejsze (z powodu drugiego parametru, flex-shrink).
Wsparcie przeglądarki
- (nowoczesny) oznacza najnowszą składnię ze specyfikacji (np.
display: flex;) - (hybryda) oznacza dziwną nieoficjalną składnię z 2011 roku (np.
display: flexbox;) - (stara) oznacza starą składnię z 2009 roku (np.
display: box;)
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (nowoczesny) 20- (stary) | 3.1+ (stary) | 2-21 (stare) 22+ (nowe) | 12.1+ (nowoczesny) | 10+ (hybryda) | 2.1+ (stary) | 3.2+ (stary) |
Przeglądarka Blackberry 10+ obsługuje nową składnię.
Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).