Ovaj zapis će ilustrirati metodu za sprječavanje rasta ili smanjivanja fleksibilnih stavki u Tailwind CSS-u.
Kako spriječiti da Flex predmeti rastu ili se skupljaju u stražnjem vjetru?
Kako biste spriječili da se fleksibilne stavke povećavaju i smanjuju u Tailwindu, napravite HTML datoteku. Zatim upotrijebite ' flex-grow-0 ' i ' savijanje-skupljanje-0 ” pomoćne programe s određenim flex stavkama u HTML programu. Ovi uslužni programi ne dopuštaju rastezanje ili smanjivanje fleksibilnih stavki u skladu s prostorom unutar fleksibilnog spremnika. Nakon toga prilagodite veličinu zaslona HTML web stranice kako biste osigurali promjene.
Slijedite navedene korake za njegovu praktičnu primjenu:
Korak 1: Spriječite rast i smanjenje Flex stavki u HTML programu
Napravite HTML program i koristite ' flex-grow-0 ' i ' savijanje-skupljanje-0 ” pomoćne programe sa željenim fleksibilnim predmetima kako biste spriječili njihov rast ili smanjivanje:
< tijelo >
< div razreda = 'flex h-20' >
< div razreda = 'flex-grow-0 bg-žuta-500 w-40 m-1' > 1 < / div >
< div razreda = 'flex-shrink-0 bg-fuksija-500 w-40 m-1' > 2 < / div >
< div razreda = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div razreda = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / tijelo >
Ovdje:
- “ flex-grow-0 ” klasa sprječava da flex stavka raste i zauzima dodatni prostor unutar flex spremnika kada je prostor dostupan.
- “ savijanje-skupljanje-0 ” klasa sprječava skupljanje i smanjivanje fleksibilne stavke unutar fleksibilnog spremnika kada nema dovoljno prostora.
- “ flex-grow ” klasa omogućuje flex stavci da raste i zauzima raspoloživi prostor unutar flex spremnika.
- “ flex-shrink ” klasa omogućuje skupljanje flex stavke ako nema dovoljno prostora unutar flex spremnika.
Korak 2: Provjerite izlaz
Pregledajte HTML web-stranicu i promijenite veličinu zaslona kako biste bili sigurni da željene fleksibilne stavke ne rastu i smanjuju se:
Gornji rezultat pokazuje da se fleksibilna stavka '2' ne smanjuje u nedostatku prostora, a stavka '1' ne raste u dostupnom prostoru. To znači da su željeni savitljivi predmeti spriječeni u rastu i skupljanju.
Zaključak
Kako biste spriječili rast i skupljanje savitljivih predmeta u Tailwindu, koristite ' flex-grow-0 ' i ' savijanje-skupljanje-0 ” pomoćne programe sa željenim flex stavkama u HTML programu. Radi provjere promijenite i pogledajte veličinu zaslona HTML web stranice. Ovaj zapis je pokazao primjer metode za sprječavanje rasta ili smanjivanja fleksibilnih stavki u Tailwind CSS-u.