Questo articolo esemplifica il metodo per impedire che gli elementi flessibili crescano o si riducano in Tailwind CSS.
Come evitare che gli articoli flessibili crescano o si restringano in Tailwind?
Per evitare che gli elementi flessibili crescano e si riducano in Tailwind, crea il file HTML. Quindi, utilizza il ' flex-crescita-0 ' E ' flex-shrink-0 ” utility con gli elementi flessibili specifici nel programma HTML. Queste utilità non consentono agli elementi flessibili di crescere o ridursi in base allo spazio all'interno del contenitore flessibile. Successivamente, regola le dimensioni dello schermo della pagina Web HTML per garantire le modifiche.
Seguire i passaggi previsti per la sua implementazione pratica:
Passaggio 1: evitare che gli elementi flessibili crescano e si riducano nel programma HTML
Crea un programma HTML e usa il ' flex-crescita-0 ' E ' flex-shrink-0 ” utility con gli elementi flessibili desiderati per evitare che crescano o si riducano:
< corpo >
< div classe = 'flessibile h-20' >
< div classe = 'flex-grow-0 bg-giallo-500 w-40 m-1' > 1 < / div >
< div classe = 'flex-shrink-0 bg-fucsia-500 w-40 m-1' > 2 < / div >
< div classe = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div classe = 'flex-shrink bg-rosso-500 w-40 m-1' > 4 < / div >
< / div >
< / corpo >
Qui:
- “ flex-crescita-0 La classe ” impedisce all'elemento flessibile di crescere e occupare spazio aggiuntivo all'interno del contenitore flessibile quando lo spazio è disponibile.
- “ flex-shrink-0 La classe ” impedisce all'articolo flessibile di restringersi e ridursi all'interno del contenitore flessibile quando lo spazio è insufficiente.
- “ crescita flessibile La classe ” consente all'elemento flessibile di crescere e occupare lo spazio disponibile all'interno del contenitore flessibile.
- “ flex-shrink La classe ” consente all'elemento flessibile di ridursi se non c'è abbastanza spazio all'interno del contenitore flessibile.
Passaggio 2: verificare l'output
Visualizza la pagina Web HTML e modifica le dimensioni dello schermo per assicurarti che agli elementi flessibili desiderati sia stato impedito di crescere e ridursi:
L'output sopra mostra che l'elemento flessibile '2' non si sta restringendo in uno spazio insufficiente e l'elemento '1' non sta crescendo nello spazio disponibile. Ciò indica che agli elementi flessibili desiderati è stato impedito di crescere e restringersi.
Conclusione
Per evitare che gli elementi flessibili crescano e si riducano in Tailwind, usa il ' flex-crescita-0 ' E ' flex-shrink-0 ” con gli elementi flessibili desiderati nel programma HTML. Per verifica, modificare e visualizzare le dimensioni dello schermo della pagina Web HTML. Questo articolo ha esemplificato il metodo per evitare che gli elementi flessibili crescano o si riducano in Tailwind CSS.