Este artículo explicará el método para evitar que los elementos flexibles se ajusten en Tailwind CSS.
¿Cómo evitar/detener que los artículos flexibles se envuelvan en Tailwind?
Para evitar que los elementos flexibles se envuelvan en Tailwind, crea un archivo HTML. Luego, use la utilidad 'flex-nowrap' con el contenedor flexible en el programa HTML para evitar que los elementos flexibles se envuelvan. A continuación, compruebe los cambios visualizando la página web HTML.
Pruebe los pasos mencionados a continuación para comprenderlo mejor:
Paso 1: evitar que los elementos flexibles se ajusten en el programa HTML
Haga un programa HTML y use el ' flex-ahora ” con el contenedor flexible deseado para evitar que los elementos flexibles se envuelvan:
< cuerpo >
< división clase = 'flex flex-nowrap h-40' >
< división clase = 'base-1/4 bg-rojo-500 m-1' > 1 < / división >
< división clase = 'base-1/3 bg-amarillo-500 m-1' > 2 < / división >
< división clase = 'base-1/2 bg-verde azulado-500 m-1' > 3 < / división >
< / división >
< / cuerpo >
Aquí:
- “ doblar La clase ” permite el diseño de flexbox en el elemento y permite que los elementos secundarios se organicen y alineen.
- “ flex-ahora La clase ” especifica que los elementos flexibles no deben ajustarse a varias líneas y mantener todos los elementos flexibles en una sola línea.
- El ' base-1/4 ”, “ base-1/3 ', y ' base-1/2 Las clases establecen el interior
el ancho de 's al 25%, 33.33% y 50% de sus elementos principales, respectivamente.
Paso 2: Verificar salida
Para asegurarse de que los elementos flexibles no se hayan envuelto, consulte la página web HTML:
En la página web anterior, los elementos flexibles están en una sola línea y no se han envuelto.
Conclusión
Para evitar que los elementos flexibles se envuelvan en Tailwind, utilice la utilidad 'flex-nowrap' con el contenedor flexible deseado en el programa HTML. Esta utilidad evita que los elementos flexibles se envuelvan. Para verificación, vea los cambios en la página web. Este artículo ha ilustrado el método para evitar que los elementos flexibles se ajusten en Tailwind CSS.