Atrybut flex-shrink w CSS

Definicja i użycie

Atrybut flex-shrink jest związany z tym samym kontenerem, stopień kurczenia się elementu w stosunku do innych elastycznych elementów.

Komentarz:Jeśli element nie jest elastycznym elementem, atrybut flex jest nieważny.

Inne wskazówki:

CSS tutorial: CSS弹性框

Podręcznik CSS:Atrybut flex

Podręcznik CSS:Atrybut flex-basis

Podręcznik CSS:Atrybut flex-direction

Podręcznik CSS:Atrybut flex-flow

Podręcznik CSS:Atrybut flex-grow

Podręcznik CSS:Atrybut flex-wrap

Podręcznik HTML DOM:Atrybut flexShrink

Przykład

Sprawia, że drugi elastyczny element kurczy się trzy razy więcej niż inne elementy:

div:nth-of-type(2) {
  flex-shrink: 3;
}

Spróbuj sam

CSS syntaxa

flex-shrink: number|initial|inherit;

Wartość atrybutu

Wartość Opis
number Liczba, określająca stopień kurczenia się elementu w stosunku do innych elastycznych elementów. Domyślna wartość to 1.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Przekazuje tę właściwość z elementu nadrzędnego. Zobacz inherit.

Techniczne szczegóły

Domyślna wartość: 1
Dziedziczenie: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja: CSS3
JavaScript syntaxa: object.style.flexShrink="5"

Wspierane przeglądarki

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z -webkit- lub -moz- oznaczają pierwszą wersję używającą prefiksu.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0