Właściwość CSSFlexbox

flex-shrink

Określa, jak bardzo element kurczy się, gdy w kontenerze brakuje miejsca.

Wartość domyślna: 1
Dziedziczona: Nie
Animowalna: tak, jako liczba
Dotyczy: elementy flex
JavaScript: element.style.flexShrink = "0"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user .avatar {
  flex-shrink: 0;
}

HTML przykładu

<div class="user stage" style="width: 260px;">
  <span class="avatar box" style="width: 44px; height: 44px; border-radius: 99px; padding: 0;">AN</span>
  <span>Anna Nowak, Mistrzyni Flexboxa i autorka trzech projektów na zaliczenie</span>
</div>

Podgląd

Definicja i zastosowanie

Właściwość flex-shrink działa odwrotnie niż flex-grow. Gdy elementy razem są szersze niż kontener, każdy oddaje część swojej szerokości proporcjonalnie do tej liczby. Domyślnie wszystkie mają 1, więc kurczą się po równo.

Wartość 0 chroni element przed ściskaniem. To przydatne dla ikon, awatarów, przycisków i etykiet, które powinny zachować swój rozmiar, podczas gdy tekst obok się zwęża.

Elementy nie kurczą się poniżej swojej minimalnej szerokości treści (najdłuższego słowa). Żeby pozwolić na więcej, ustaw min-width: 0.

Składnia

flex-shrink: <liczba>;

Wartości

1
Wszystkie elementy kurczą się po równo, bo mają domyślne 1.
0
Element 2 zachowuje pełne 120px, kurczą się tylko pozostałe.
3
Element 2 oddaje trzy razy więcej miejsca niż pozostałe.

Wartość	Opis
1	Wszystkie elementy kurczą się po równo, bo mają domyślne 1.
0	Element 2 zachowuje pełne 120px, kurczą się tylko pozostałe.
3	Element 2 oddaje trzy razy więcej miejsca niż pozostałe.

Wartości w praktyce

Wszystkie elementy kurczą się po równo, bo mają domyślne 1.

.target { flex-shrink: 1; }

Element 2 zachowuje pełne 120px, kurczą się tylko pozostałe.

.target { flex-shrink: 0; }

Element 2 oddaje trzy razy więcej miejsca niż pozostałe.

.target { flex-shrink: 3; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Ikony i awatary obok tekstu prawie zawsze powinny mieć flex-shrink: 0, inaczej zgniatają się w owal.
Jeśli długi tekst w elemencie flex nie chce się zawinąć ani obciąć, dodaj mu min-width: 0.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs