Den här uppskrivningen kommer att exemplifiera metoden för att förhindra flexobjekt från att växa eller krympa i Tailwind CSS.
Hur förhindrar man att flexföremål växer eller krymper i medvind?
För att förhindra att flexobjekten växer och krymper i Tailwind, gör HTML-filen. Använd sedan ' flex-grow-0 ' och ' flex-krympa-0 ”-verktyg med de specifika flex-objekten i HTML-programmet. Dessa verktyg tillåter inte flexartiklar att växa eller krympa beroende på utrymmet i flexbehållaren. Justera sedan skärmstorleken på HTML-webbsidan för att säkerställa ändringar.
Följ de medföljande stegen för praktisk implementering:
Steg 1: Förhindra att Flex-objekt växer och krymper i HTML-programmet
Skapa ett HTML-program och använd ' flex-grow-0 ' och ' flex-krympa-0 ” verktyg med önskade flexartiklar för att förhindra att de växer eller krymper:
< kropp >
< div klass = 'flex h-20' >
< div klass = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div klass = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klass = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div klass = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / kropp >
Här:
- ' flex-grow-0 ”-klassen förhindrar att flexföremålet växer och tar extra plats i flexbehållaren när utrymme finns tillgängligt.
- ' flex-krympa-0 ” klass förhindrar flexföremålet från att krympa och minska i flexbehållaren när utrymmet är otillräckligt.
- ' flex-växa ”-klassen tillåter flexobjektet att växa och uppta det tillgängliga utrymmet i flexbehållaren.
- ' flex-krympa ” klass tillåter flexobjektet att krympa om det inte finns tillräckligt med utrymme i flexbehållaren.
Steg 2: Verifiera utdata
Visa HTML-webbsidan och ändra skärmstorleken för att säkerställa att de önskade flexobjekten har förhindrats från att växa och krympa:
Ovanstående utdata visar att flexobjektet '2' inte krymper i otillräckligt utrymme och objektet '1' växer inte i det tillgängliga utrymmet. Detta indikerar att de önskade flexartiklarna har förhindrats från att växa och krympa.
Slutsats
För att förhindra att flexartiklarna växer och krymper i Tailwind, använd ' flex-grow-0 ' och ' flex-krympa-0 ”-verktyg med önskade flexobjekt i HTML-programmet. För verifiering, ändra och visa skärmstorleken på HTML-webbsidan. Denna uppskrivning har exemplifierat metoden för att förhindra flexobjekt från att växa eller krympa i Tailwind CSS.