Ez az írás azt a módszert szemlélteti, amellyel megakadályozható, hogy a rugalmas elemek növekedjenek vagy zsugorodjanak a Tailwind CSS-ben.
Hogyan akadályozható meg, hogy a Flex termékek növekedjenek vagy zsugorodjanak hátszélben?
Ha meg szeretné akadályozni, hogy a rugalmas elemek növekedjenek és zsugorodjanak a Tailwindben, készítse el a HTML-fájlt. Ezután használja a „ flex-grow-0 ” és „ flex-zsugor-0 ” segédprogramok a HTML programban található speciális flex elemekkel. Ezek a segédprogramok nem teszik lehetővé, hogy a rugalmas elemek növekedjenek vagy zsugorodjanak a flexibilis tartályon belüli térnek megfelelően. Ezt követően állítsa be a HTML-weboldal képernyőméretét a változtatások érdekében.
A gyakorlati megvalósításhoz kövesse az alábbi lépéseket:
1. lépés: Akadályozza meg, hogy a Flex-elemek növekedjenek és zsugorodjanak a HTML programban
Készíts egy HTML programot, és használd a „ flex-grow-0 ” és „ flex-zsugor-0 ” segédprogramok a kívánt rugalmas elemekkel, hogy megakadályozzák azok növekedését vagy zsugorodását:
< test >
< div osztály = 'flex h-20' >
< div osztály = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div osztály = 'flex-shrink-0 bg-fuksia-500 w-40 m-1' > 2 < / div >
< div osztály = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div osztály = 'flex-zsugor bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / test >
Itt:
- ' flex-grow-0 ” osztály megakadályozza, hogy a flex elem növekedjen, és extra helyet foglaljon el a flex tárolóban, ha van szabad hely.
- ' flex-zsugor-0 ” osztály megakadályozza, hogy a rugalmas elem összezsugorodik és csökkenjen a flexibilis tartályon belül, ha nincs elég hely.
- ' flex-grow ” osztály lehetővé teszi, hogy a flex elem növekedjen, és elfoglalja a rendelkezésre álló helyet a rugalmas tárolóban.
- ' rugalmas-zsugorodás ” osztály lehetővé teszi a flex elem zsugorodását, ha nincs elég hely a flex tárolóban.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a HTML weboldalt, és módosítsa a képernyő méretét, hogy megbizonyosodjon arról, hogy a kívánt rugalmas elemek nem növekednek és zsugorodnak:
A fenti kimenet azt mutatja, hogy a „2” rugalmas elem nem zsugorodik elégtelen helyen, és az „1” elem nem növekszik a rendelkezésre álló helyen. Ez azt jelzi, hogy a kívánt hajlékony elemeket megakadályozták a növekedésben és a zsugorodásban.
Következtetés
Ha meg szeretné akadályozni, hogy a hajlékony elemek növekedjenek és zsugorodjanak hátszélben, használja a „ flex-grow-0 ” és „ flex-zsugor-0 ” segédprogramok a kívánt flex elemekkel a HTML programban. Az ellenőrzéshez módosítsa és tekintse meg a HTML weboldal képernyőméretét. Ez az írás példát mutatott arra a módszerre, amellyel megakadályozható a rugalmas elemek növekedése vagy zsugorodása a Tailwind CSS-ben.