Este artículo ejemplificará el método para evitar que los elementos flexibles crezcan o se reduzcan en Tailwind CSS.
¿Cómo evitar que los artículos flexibles crezcan o se encojan con el viento de cola?
Para evitar que los elementos flexibles crezcan y se reduzcan en Tailwind, cree el archivo HTML. Luego, utilice el “ flex-crecer-0 ' y ' flex-retráctil-0 ” utilidades con los elementos flexibles específicos en el programa HTML. Estas utilidades no permiten que los elementos flexibles crezcan o se encojan según el espacio dentro del contenedor flexible. Después de eso, ajuste el tamaño de la pantalla de la página web HTML para garantizar los cambios.
Siga los pasos proporcionados para su implementación práctica:
Paso 1: Evite que los elementos flexibles crezcan y se reduzcan en el programa HTML
Haga un programa HTML y use el ' flex-crecer-0 ' y ' flex-retráctil-0 ”utilidades con los elementos flexibles deseados para evitar que crezcan o se encojan:
< cuerpo >
< división clase = 'flex h-20' >
< división clase = 'flex-grow-0 bg-amarillo-500 w-40 m-1' > 1 < / división >
< división clase = 'flex-shrink-0 bg-fucsia-500w-40m-1' > 2 < / división >
< división clase = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / división >
< división clase = 'flex-retráctil bg-rojo-500 w-40 m-1' > 4 < / división >
< / división >
< / cuerpo >
Aquí:
- “ flex-crecimiento-0 La clase ” evita que el elemento flexible crezca y ocupe espacio adicional dentro del contenedor flexible cuando hay espacio disponible.
- “ flex-retráctil-0 La clase ” evita que el elemento flexible se encoja y se reduzca dentro del contenedor flexible cuando el espacio es insuficiente.
- “ crecimiento flexible La clase ” permite que el elemento flexible crezca y ocupe el espacio disponible dentro del contenedor flexible.
- “ flexión-encogimiento La clase ” permite que el elemento flexible se encoja si no hay suficiente espacio dentro del contenedor flexible.
Paso 2: Verificar salida
Vea la página web HTML y cambie el tamaño de la pantalla para asegurarse de que los elementos flexibles deseados no crezcan ni se reduzcan:
El resultado anterior muestra que el elemento flexible '2' no se está reduciendo en espacio insuficiente y el elemento '1' no está creciendo en el espacio disponible. Esto indica que se ha impedido que los elementos flexibles deseados crezcan y se encojan.
Conclusión
Para evitar que los elementos flexibles crezcan y se encojan en Tailwind, use el ' flex-crecer-0 ' y ' flex-retráctil-0 ” utilidades con los elementos flexibles deseados en el programa HTML. Para verificación, cambie y vea el tamaño de pantalla de la página web HTML. Este artículo ha ejemplificado el método para evitar que los elementos flexibles crezcan o se reduzcan en Tailwind CSS.