Tento zápis bude príkladom metódy, ako zabrániť rastu alebo zmenšovaniu flexibilných položiek v CSS Tailwind.
Ako zabrániť rastu alebo zmenšovaniu flexibilných položiek v Tailwinde?
Ak chcete zabrániť rastu a zmenšovaniu flexibilných položiek v Tailwinde, vytvorte súbor HTML. Potom použite „ flex-grow-0 “ a „ flex-shrink-0 ” pomocné programy so špecifickými flexibilnými položkami v programe HTML. Tieto nástroje neumožňujú, aby ohybné predmety rástli alebo sa zmenšovali v závislosti od priestoru v ohybnom kontajneri. Potom upravte veľkosť obrazovky webovej stránky HTML, aby ste zabezpečili zmeny.
Pre jeho praktickú implementáciu postupujte podľa uvedených krokov:
Krok 1: Zabráňte rastu a zmenšovaniu položiek Flex v programe HTML
Vytvorte HTML program a použite „ flex-grow-0 “ a „ flex-shrink-0 ” nástroje s požadovanými ohybnými prvkami, aby sa zabránilo ich rastu alebo zmenšovaniu:
< telo >
< div trieda = 'flex h-20' >
< div trieda = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div trieda = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div trieda = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div trieda = 'flex-zmršťovacia bg-červená-500 w-40 m-1' > 4 < / div >
< / div >
< / telo >
Tu:
- “ flex-grow-0 ” trieda zabraňuje tomu, aby sa ohybná položka rozrástla a zaberala viac miesta v ohybnej nádobe, keď je k dispozícii miesto.
- “ flex-shrink-0 ” trieda zabraňuje zmršťovaniu a zmenšeniu ohybného predmetu v ohybnom kontajneri, keď nie je dostatok miesta.
- “ flex-grow Trieda ” umožňuje flexibilnej položke rásť a zaberať dostupný priestor v flex kontajneri.
- “ flex-shrink Trieda ” umožňuje zmrštenie ohybnej položky, ak nie je v flex nádobe dostatok miesta.
Krok 2: Overte výstup
Zobrazte webovú stránku HTML a zmeňte veľkosť obrazovky, aby ste sa uistili, že požadované flexibilné položky nebudú rásť a zmenšovať sa:
Vyššie uvedený výstup ukazuje, že flex položka „2“ sa nezmršťuje v nedostatočnom priestore a položka „1“ nerastie v dostupnom priestore. To znamená, že požadovaným pružným položkám sa zabránilo v raste a zmršťovaní.
Záver
Ak chcete zabrániť rastu a zmenšovaniu ohybných položiek v Tailwinde, použite „ flex-grow-0 “ a „ flex-shrink-0 ” pomocné programy s požadovanými flexibilnými položkami v programe HTML. Na overenie zmeňte a zobrazte veľkosť obrazovky webovej stránky HTML. Tento zápis je príkladom metódy, ako zabrániť rastu alebo zmenšovaniu flexibilných položiek v CSS Tailwind.