El CSS flexbox es una característica vital para desarrollar la interfaz, hay dos flex-shrink disponibles en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de CSS flex-shrink Property para el rápido desarrollo del front-end. Esta clase especifica cuánto se encogerá el elemento en comparación con otros elementos dentro de ese contenedor. Define la capacidad de un elemento para encogerse en comparación con los otros elementos que se colocan dentro del mismo contenedor.
Encogimiento flexible:
- flex-retráctil-0
- flexión-encogimiento
flex-shrink-0: esta clase restringe la función de reducción, tiene la capacidad de que un elemento se reduzca en comparación con el contenido presente dentro del mismo contenedor.
Sintaxis:
<element class="flex-shrink-0"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind flex-shrink-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-shrink-0 Class</b> <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> <div class="rounded bg-green-600 flex-1 h-12 "> Side Part</div> <div class="rounded bg-green-300 flex-shrink-0 h-12"> Flex-Shrink-0 </div> <div class="rounded bg-green-600 flex-1 h-12 mr-12"> Side Part</div> </div> </body> </html>
Producción:
flex-shrink: esta clase no restringe la función de reducción. Tiene la capacidad de que un elemento se encoja en comparación con el espacio que queda en la pantalla y encaje en ese espacio sobrante.
Sintaxis:
<element class="flex-shrink">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind flex-shrink 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-shrink Class</b> <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> <div class="rounded bg-green-600 flex-grow w-16 h-12 "> Side Part</div> <div class="rounded bg-green-300 flex-shrink h-12"> Flex-Shrink </div> <div class="rounded bg-green-600 flex-grow w-16 h-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