Tento zápis bude příkladem metody, jak zabránit zvětšování nebo zmenšování flexibilních položek v CSS Tailwind.
Jak zabránit růstu nebo zmenšování flexibilních položek ve službě Tailwind?
Chcete-li zabránit zvětšování a zmenšování flexibilních položek v Tailwindu, vytvořte soubor HTML. Poté použijte „ flex-grow-0 ' a ' flex-shrink-0 ” nástroje se specifickými flexibilními položkami v programu HTML. Tyto nástroje neumožňují, aby flex předměty rostly nebo se zmenšovaly podle prostoru v flex kontejneru. Poté upravte velikost obrazovky webové stránky HTML, abyste zajistili změny.
Pro jeho praktickou implementaci postupujte podle uvedených kroků:
Krok 1: Zabraňte růstu a zmenšování položek Flex v programu HTML
Vytvořte HTML program a použijte „ flex-grow-0 ' a ' flex-shrink-0 ” nástroje s požadovanými ohebnými položkami, aby se zabránilo jejich růstu nebo zmenšování:
< tělo >
< div třída = 'flex h-20' >
< div třída = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div třída = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div třída = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div třída = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / tělo >
Tady:
- “ flex-grow-0 Třída ” zabraňuje tomu, aby flex položka rostla a zabírala další místo v flex kontejneru, když je místo k dispozici.
- “ flex-shrink-0 Třída ” zabraňuje smršťování a zmenšování ohebného předmětu v ohebném kontejneru, když není dostatek místa.
- “ flex-grow ” umožňuje flex položce růst a zabírat dostupný prostor v flex kontejneru.
- “ flex-shrink Třída ” umožňuje, aby se flex položka zmenšila, pokud v flex kontejneru není dostatek místa.
Krok 2: Ověřte výstup
Zobrazte webovou stránku HTML a změňte velikost obrazovky, abyste zajistili, že požadované flexibilní položky nebudou narůstat a zmenšovat se:
Výše uvedený výstup ukazuje, že flex položka „2“ se v nedostatečném prostoru nezmenšuje a položka „1“ v dostupném prostoru neroste. To znamená, že požadovaným pružným prvkům bylo zabráněno v růstu a smršťování.
Závěr
Chcete-li zabránit růstu a zmenšování pružných položek v Tailwindu, použijte „ flex-grow-0 ' a ' flex-shrink-0 ” nástroje s požadovanými flexibilními položkami v programu HTML. Pro ověření změňte a zobrazte velikost obrazovky webové stránky HTML. Tento zápis je příkladem metody, jak zabránit zvětšování nebo zmenšování flexibilních položek v Tailwind CSS.