Aquest escrit exemplificarà el mètode per evitar que els elements flexibles creixin o es redueixin a Tailwind CSS.
Com evitar que els elements flexibles creixin o es redueixin a Tailwind?
Per evitar que els elements flexibles creixin i es redueixin a Tailwind, feu el fitxer HTML. A continuació, utilitzeu el ' flex-creixement-0 ' i ' flex-retràctil-0 ” utilitats amb els elements flexibles específics del programa HTML. Aquestes utilitats no permeten que els elements flexibles creixin o es redueixin segons l'espai dins del contenidor flexible. Després d'això, ajusteu la mida de la pantalla de la pàgina web HTML per garantir els canvis.
Seguiu els passos indicats per a la seva implementació pràctica:
Pas 1: evita que els elements flexibles creixin i es redueixin al programa HTML
Feu un programa HTML i utilitzeu el ' flex-creixement-0 ' i ' flex-retràctil-0 ” utilitats amb els elements flexibles desitjats per evitar que creixin o es redueixin:
< cos >
< div classe = 'flex h-20' >
< div classe = 'flex-grow-0 bg-yellow-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-red-500 w-40 m-1' > 4 < / div >
< / div >
< / cos >
Aquí:
- “ flex-creixement-0 La classe impedeix que l'element flexible creixi i ocupi espai addicional dins del contenidor flexible quan hi ha espai disponible.
- “ flex-retràctil-0 ” La classe evita que l'element flexible es redueixi i es redueixi dins del contenidor flexible quan l'espai és insuficient.
- “ creixement flexible La classe permet que l'element flexible creixi i ocupi l'espai disponible dins del contenidor flexible.
- “ flex-retràctil La classe permet que l'element flexible es redueixi si no hi ha prou espai dins del contenidor flexible.
Pas 2: verifiqueu la sortida
Visualitzeu la pàgina web HTML i canvieu la mida de la pantalla per assegurar-vos que els elements flexibles desitjats no creixin ni es redueixin:
La sortida anterior mostra que l'element flexible '2' no s'està reduint en un espai insuficient i que l'element '1' no creix a l'espai disponible. Això indica que s'ha evitat que els elements flexibles desitjats creixin i es redueixin.
Conclusió
Per evitar que els elements flexibles creixin i es redueixin a Tailwind, utilitzeu el ' flex-creixement-0 ' i ' flex-retràctil-0 ” utilitats amb els elements flexibles desitjats al programa HTML. Per a la verificació, canvieu i visualitzeu la mida de la pantalla de la pàgina web HTML. Aquest escrit ha exemplificat el mètode per evitar que els elements flexibles creixin o es redueixin a Tailwind CSS.