Flexbox: Řízení zmenšení ve směru flexu pomocí vlastnosti flex-shrink

V tomto návodu se budeme zabývat vlastnostním modifikátorem flex-shrink v CSS. Tato možnost je součástí Flexbox modelu, který ti umožňuje vytvářet flexibilní layouty, které se přizpůsobí různým velikostem obrazovek. Zatímco jsme se v posledním videu zabývali vlastností flex-grow, která řídí, jak mohou prvky v Flex-Containeru růst, tentokrát půjde o zmenšení prvků, pokud je místo v kontejneru menší než určená flex-basis. V tomto příspěvku se naučíš, jak pomocí flex-shrink omezit nebo upravit zmenšení prvků v Flexboxu.

Nejdůležitější poznatky

• flex-shrink určuje, o kolik může prvek zmenšit, pokud není dostatek místa.
• Standardní hodnota pro flex-shrink je 1, což znamená, že prvek může zabírat místo v závislosti na dostupném prostoru a definovaných dalších prvcích v kontejneru.
• Můžeš využít flex-shrink k určení konkrétního poměru zmenšení mezi různými prvky.

Krok za krokem návod

Níže ti vysvětlím kroky, jak efektivně využít flex-shrink. Každý krok doplním proměnnými se snímky obrazovky, které můžeš později nahradit odpovídajícími snímky z videa.

Nejprve uvidíš základní Flexboxovou aplikaci v CSS. Máš tři prvky s flex-basis 100 pixelů. Pokud je v Flex-Containeru dostatek místa, vše zůstane podle plánu.

Nyní zmenšíme výšku kontejneru na 200 pixelů. V tomto případě je potřebný prostor větší než výška kontejneru. Prvky stále mají flex-basi 100 pixelů a nemohou se zmenšit, protože jsme nastavili flex-shrink na 0.

Abychom aktivovat mechanismus zmenšení, změníme hodnotu flex-shrink. Nastav ho pro prvek nav na 1. Tím informuješ CSS, že prvek nav by se měl zmenšit maximálně.

Nyní ulož své změny a uvidíš, že prvek nav bude poměrně zmenšený, až na minimální výšku dávanou obsahem.

Pokud chceš, aby se všechny prvky rovnoměrně zmenšily, nastav flex-shrink pro všechny prvky na 1. Pokud se kontejner zmenší na menší velikost než je potřeba, všechny prvky se zmenší odpovídajícím způsobem.

Abychom ti shrnuli, jak se různá hodnota flex-shrink odráží na layoutu, vyber poměr jako 1:1:2. V tomto případě bude hlavní oblast (main) mít největší podíl zmenšení, zatímco ostatní prvky budou mít menší podíl.

To znamená, že prvek main přebere více místa, nebo naopak bude potřebovat méně místa než další dva prvky, pokud je nedostatek místa. Pokud ale chceš, aby měly prvky stejnou úpravu, můžeš nastavit flex-shrink pro všechny prvky na stejnou hodnotu.

Konečně můžeš kombinovat hodnoty flex-grow, flex-shrink a flex-basis, což ti poskytne větší flexibilitu při tvorbě layoutu v CSS. Měj na paměti, abys je vždy přizpůsobil požadavkům svého designu.

Shrnutí

V tomto tutoriálu jsi se naučil, jak používat flex-shrink v CSS k řízení změn velikosti prvků ve Flexboxu. Seznámil jsi se s různými možnostmi definování zmenšení a jak se to projevuje na layoutu.