Jakým podílem vzhledem k ostatním položkám se může definovaná položka zmenšovat, pokud v rodičovském kontejneru místo ubylo – když uživatel zmenšil okno nebo třeba přibyla nová položka? Od toho tady máme vlastnost flex-shrink
.

Vlastnost flex-shrink
velí způsobu smršťování.
Také v jejím případě platí, že je obecně lepší namísto ní používat zkratku flex
. Problematikou smršťování se ale zabývat budeme, to si pište, že ano.
Související
Možné hodnoty:
1
(výchozí)
Položka si z vlastní šířky ubere část odpovídající celé velikosti smrštění.- Kladná čísla (např.
0.5
,1
,2
…)
Položka si ze své šířky vezme podíl z ubrané části kontejneru odpovídající tomuto číslu. 0
Položka je tvrdohlavá a smršťovat se nebude. A nebude!
Demo
Ani zde nevynecháme příklad. Pevně doufám, že když si pohrajete s přepínači v CodePenu, celou věc snáze pochopíte.
Připomenu základní nastavení těchto ukázek: Na rodiči (.container
s nastavením display:flex
) zde leží tíha udržet na uzdě tři potomky (.box
). Zde jsme demo obohatili ještě o nastavení každého potomka tak, aby se pokoušel urvat co nejvíce prostoru z rodiče:
.box {
width: 100%;
}
Ta paralela se skutečným rodičovstvím je zde až mrazivá. Mámy a tátové mezi čtenáři vědí, takové děti nechceme, ale všechny jsou takové. Ale nic, zpět k CSS…
Podívejme se na různé možnosti nastavení flex-shrink
, které dostává první dítě, nebo raději položka jménem .box
:
0
– nesmršťuje se. Nebude se za žádnou cenu omezovat. Jednou jsme řekliwidth:100%
, tak co bychom také chtěli…? Podřídí se tomuto pravidlu a oba ostatní sourozence vytlačí ven. Vzhledem k tomu, že výchozí hodnotaflex-shrink
je1
, sourozenci si poctivě ze své šířky ubrali.0.5
– ubere si polovinu oproti sourozencům, takže při zmenšování rodičovského prvku zabírá stále více místa.1
– v tomto případě se všichni potomkové spravedlivě smršťují stejným podílem. Z pohledu rodiče ideální stav.2
– první položka si ubírá dvojnásobek oproti zbylým dvěma.
Je to trochu jasnější? Snad ano.
Podpora v prohlížečích
Podpora je – podobně jako u vlastnosti flex-grow
– plná. Internet Explorer 10 jako výchozí hodnotu chybně používá 0
, ale tuto informaci už v 21. století asi potřebovat nebudete. Viz CanIUse.com.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?