El CSS flexbox es una característica vital para desarrollar la interfaz, hay dos flex-grow disponibles en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de CSS flex grow Property para el rápido desarrollo del front-end. Esta clase especifica cuánto crecerá el elemento en comparación con otros elementos dentro de ese contenedor. En otras palabras, es la capacidad de crecimiento de un elemento en comparación con otros elementos presentes dentro del mismo contenedor.
Crecimiento flexible:
- flex-crecer-0
- crecimiento flexible
flex-grow-0: esta clase restringe la función de crecimiento, tiene la capacidad de que un elemento crezca en comparación con el contenido presente dentro del mismo contenedor.
Sintaxis:
<element class="flex-grow-0"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind flex-grow-0 Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS flex-grow-0 Class</b> <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> <div class="rounded bg-green-600 flex-grow h-12 "> Side Part</div> <div class="rounded bg-green-300 flex-grow-0 h-12"> Flex-Grow-0 </div> <div class="rounded bg-green-600 flex-grow h-12 mr-12"> Side Part</div> </div> </body> </html>
Producción:
flex-grow: esta clase no restringe la función de crecimiento, tiene la capacidad de que un elemento crezca en comparación con el espacio que queda en la pantalla.
Sintaxis:
<element class="flex-grow"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind flex-grow Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS flex-grow Class</b> <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> <div class="rounded bg-green-600 w-24 h-12 ">Side Part</div> <div class="rounded bg-green-300 flex-grow h-12"> TailWind CSS Flex-Grow </div> <div class="rounded bg-green-600 w-24 h-12 mr-12">Side Part</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA