Denne opskrivning vil eksemplificere metoden til at forhindre flex-elementer i at vokse eller krympe i Tailwind CSS.
Hvordan forhindrer man Flex-emner i at vokse eller krympe i medvind?
For at forhindre flex-elementerne i at vokse og krympe i Tailwind, lav HTML-filen. Brug derefter ' flex-grow-0 ' og ' flex-shrink-0 ” hjælpeprogrammer med de specifikke flex-elementer i HTML-programmet. Disse hjælpeprogrammer tillader ikke flex-genstande at vokse eller krympe i overensstemmelse med pladsen i flex-beholderen. Juster derefter HTML-websidens skærmstørrelse for at sikre ændringer.
Følg de angivne trin for den praktiske implementering:
Trin 1: Forhindr Flex-elementer i at vokse og krympe i HTML-programmet
Lav et HTML-program og brug ' flex-grow-0 ' og ' flex-shrink-0 ” hjælpeprogrammer med de ønskede fleksible elementer for at forhindre dem i at vokse eller krympe:
< legeme >
< div klasse = 'flex h-20' >
< div klasse = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klasse = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klasse = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klasse = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / legeme >
Her:
- “ flex-grow-0 ” klasse forhindrer flex-emnet i at vokse og tage ekstra plads i flex-beholderen, når der er ledig plads.
- “ flex-shrink-0 ” klasse forhindrer flex-emnet i at krympe og reducere i flex-beholderen, når pladsen er utilstrækkelig.
- “ flex-grow ” klasse gør det muligt for flex-emnet at vokse og optage den tilgængelige plads i flex-beholderen.
- “ flex-krympe ” klasse tillader flex-emnet at krympe, hvis der ikke er nok plads i flex-beholderen.
Trin 2: Bekræft output
Se HTML-websiden og skift skærmstørrelsen for at sikre, at de ønskede flex-elementer er blevet forhindret i at vokse og krympe:
Ovenstående output viser, at flex-elementet '2' ikke krymper ved utilstrækkelig plads, og elementet '1' vokser ikke i den tilgængelige plads. Dette indikerer, at de ønskede flex-emner er blevet forhindret i at vokse og krympe.
Konklusion
For at forhindre flex-emnerne i at vokse og krympe i Tailwind, skal du bruge ' flex-grow-0 ' og ' flex-shrink-0 ” hjælpeprogrammer med de ønskede flex-elementer i HTML-programmet. For verifikation skal du ændre og se skærmstørrelsen på HTML-websiden. Denne opskrivning har eksemplificeret metoden til at forhindre flex-emner i at vokse eller krympe i Tailwind CSS.