Viento de cola CSS Flex

El CSS flexbox es una característica vital para desarrollar la interfaz, hay cuatro flex disponibles en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de CSS flex Property para el desarrollo rápido de front-end. Se utiliza para establecer la longitud de elementos flexibles. La clase flexible es mucho más receptiva y compatible con dispositivos móviles. Es fácil colocar elementos secundarios y el contenedor principal. El margen no colapsa con los márgenes del contenido. El orden de cualquier elemento se puede cambiar fácilmente sin editar la sección HTML.

Flexionar:

  • flex-1
  • inicial flexible
  • flex-auto
  • flex-ninguno

flex-1: una proporción que especifica cuánto crecerán los elementos en relación con el resto de los elementos flexibles. Se ha utilizado para permitir que un elemento flexible crezca y se reduzca según sea necesario, ignorando su tamaño inicial.

Sintaxis:

 <element class="flex-1"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind flex-1 Class</title> 
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-center text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <p class="text-center font-bold">Tailwind CSS flex-1 Class</p>
   
    <div id="main" class="bg-green-200 border-4 
                          border-green-600 w-2/3 ml-32"> 
        <p class="ml-2">This is the effect of flex-1:</p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-1">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-1">
                Tailwind CSS
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-initial:
         </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-initial">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-initial">
                A Computer Science for Geeks
            </div> 
        </div>
        <p class="ml-2">
            This is the effect of flex-auto:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-auto">
                CSS
            </div> 
            <div class="bg-green-800 flex-auto">
                Cascading Style Sheet
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-none:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-none">
                HTML
            </div> 
            <div class="bg-green-800 flex-none">
                Hypertext Markup Langauge
            </div> 
        </div>
    </div> 
</body> 
  
</html>

Producción:

flex-initial: Esta clase define cuánto crecerá ese elemento en relación con el resto de elementos flexibles. Se ha utilizado para permitir que un artículo flexible se encoja pero no crezca, teniendo en cuenta su tamaño inicial

Sintaxis:

  <element class="flex-initial">..</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind flex-initial Class</title> 
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-center text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <p class="text-center font-bold">Tailwind CSS flex-initial Class</p>
   
    <div id="main" class="bg-green-200 border-4 
                          border-green-600 w-2/3 ml-32"> 
        <p class="ml-2">This is the effect of flex-1:</p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-1">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-1">
                Tailwind CSS
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-initial:
         </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-initial">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-initial">
                A Computer Science for Geeks
            </div> 
        </div>
        <p class="ml-2">
            This is the effect of flex-auto:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-auto">
                CSS
            </div> 
            <div class="bg-green-800 flex-auto">
                Cascading Style Sheet
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-none:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-none">
                HTML
            </div> 
            <div class="bg-green-800 flex-none">
                Hypertext Markup Langauge
            </div> 
        </div>
    </div> 
</body> 
  
</html>

Producción:

flex-auto: esta clase especifica cuánto crecerá ese elemento en relación con el contenido de los elementos flexibles. Se ha utilizado para permitir que un elemento flexible crezca y se reduzca según sea necesario, ignorando su tamaño inicial.

Sintaxis:

  <element class="flex-auto"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind flex-auto Class</title> 
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-center text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <p class="text-center font-bold">Tailwind CSS flex-auto Class</p>
   
    <div id="main" class="bg-green-200 border-4 
                          border-green-600 w-2/3 ml-32"> 
        <p class="ml-2">This is the effect of flex-1:</p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-1">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-1">
                Tailwind CSS
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-initial:
         </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-initial">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-initial">
                A Computer Science for Geeks
            </div> 
        </div>
        <p class="ml-2">
            This is the effect of flex-auto:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-auto">
                CSS
            </div> 
            <div class="bg-green-800 flex-auto">
                Cascading Style Sheet
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-none:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-none">
                HTML
            </div> 
            <div class="bg-green-800 flex-none">
                Hypertext Markup Langauge
            </div> 
        </div>
    </div> 
</body> 
  
</html>

Producción:

flex-none: esta clase establece la restricción para aumentar o reducir el elemento si hay espacio adicional disponible o no. Esto es para evitar que un elemento flexible crezca o se reduzca, solo ocupa el espacio de acuerdo con el tamaño del contenido.

Sintaxis:

  <element class="flex-none">..</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind flex-none Class</title> 
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-center text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <p class="text-center font-bold">Tailwind CSS flex-none Class</p>
   
    <div id="main" class="bg-green-200 border-4 
                          border-green-600 w-2/3 ml-32"> 
        <p class="ml-2">This is the effect of flex-1:</p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-1">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-1">
                Tailwind CSS
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-initial:
         </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-initial">
                Geeksforgeeks
            </div> 
            <div class="bg-green-800 flex-initial">
                A Computer Science for Geeks
            </div> 
        </div>
        <p class="ml-2">
            This is the effect of flex-auto:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-auto">
                CSS
            </div> 
            <div class="bg-green-800 flex-auto">
                Cascading Style Sheet
            </div> 
        </div>
        <p class="ml-2">
                This is the effect of flex-none:
        </p>
  
        <div class="flex m-2 text-white">
            <div class="bg-green-900 flex-none">
                HTML
            </div> 
            <div class="bg-green-800 flex-none">
                Hypertext Markup Langauge
            </div> 
        </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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *