Flex-krympning - CSS-tricks | CSS Almanack 2025

Den flex-shrinkegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Den anger "flex-krympfaktorn", som avgör hur mycket flex-objektet kommer att krympa i förhållande till resten av flex-artiklarna i flex-behållaren när det inte finns tillräckligt med utrymme på raden.

När den utelämnas sätts den till 1och flexkrympningsfaktorn multipliceras med flexbasen vid fördelning av negativt utrymme.

Syntax

flex-shrink: .flex-item ( flex-shrink: 2; )

Demo

För att se den fulla potentialen i denna demo måste du kunna ändra storlek på dess bredd, så titta direkt på den på CodePen.

Kolla in den här pennan!

I denna demo:

Den första punkten har flex: 1 1 20em(förkortning för flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
Det andra objektet har flex: 2 2 20em(förkortning för flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Båda flexobjekten vill vara 20 em breda. På grund av flex-grow (första parametern), om flexcontainern är större än 40em, tar det andra barnet dubbelt så mycket kvarvarande utrymme som det första barnet. Men om det överordnade elementet är mindre än 40 em brett, kommer det andra barnet att ha dubbelt så mycket rakat av det som det första barnet, vilket gör att det ser mindre ut (på grund av den andra parametern, flex-krympning).

Webbläsarstöd

(modern) betyder den senaste syntaxen från specifikationen (t.ex. display: flex;)
(hybrid) betyder en udda inofficiell syntax från 2011 (t.ex. display: flexbox;)
(gammal) betyder den gamla syntaxen från 2009 (t.ex. display: box;)