El CSS flexbox es una característica vital para desarrollar la interfaz, hay cuatro direcciones disponibles en CSS, por lo que en Tailwind CSS todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de CSS flex-direction Property para un rápido desarrollo de front-end.
Nota: Para activar la dirección flexible, debe incluir la clase flexible en su elemento antes de la clase de dirección flexible.
Dirección de flexión:
- fila flexible
- fila-flexible-reversa
- col flexible
- flex-col-reverse
A continuación se muestran los códigos de ejemplo de cada dirección con la salida:
fila flexible: organiza la fila de la misma manera que la dirección del texto. El valor predeterminado de dirección flexible es una fila. Se utiliza para especificar que el elemento tiene una dirección de texto normal. Hace que el elemento siga la dirección normal del texto en las líneas.
Sintaxis:
<element class="flex flex-row"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind flex-row 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-row Class</b> <div id="main" class="flex flex-row justify-evenly"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
flex-row-reverse: esta clase se usa para seguir la dirección opuesta del texto. Hace que los elementos flexibles se inviertan exactamente en la dirección opuesta a la dirección del texto, como podemos ver en la Salida.
Sintaxis:
<element class="flex flex-row-reverse"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind flex-row-reverse 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-row-reverse Class</b> <div id="main" class="flex flex-row-reverse justify-evenly"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
flex-col: organiza la fila como una columna en la misma dirección del texto pero de arriba a abajo. Se utiliza para especificar que el elemento tiene una dirección normal de arriba a abajo. Hace que el elemento siga la dirección normal de arriba a abajo, como podemos ver en la salida.
Sintaxis:
<element class="flex flex-col"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind flex-col 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-col Class</b> <div id="main" class="flex flex-col gap-y-2"> <div class="bg-green-900 w-30 h-12">1</div> <div class="bg-green-800 w-30 h-12">2</div> <div class="bg-green-700 w-30 h-12">3</div> <div class="bg-green-600 w-30 h-12">4</div> <div class="bg-green-500 w-30 h-12">5</div> <div class="bg-green-400 w-30 h-12">6</div> </div> </body> </html>
Producción:
flex-col-reverse: Organiza la fila como una columna igual que la fila-reversa de abajo hacia arriba. Se utiliza para especificar que el elemento tiene una dirección normal de abajo hacia arriba. Hace que el elemento siga la dirección normal de abajo hacia arriba, como podemos ver en la salida.
Sintaxis:
<element class="flex flex-col-reverse"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind flex-col-reverse 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-col-reverse Class</b> <div id="main" class="flex flex-col-reverse gap-y-2"> <div class="bg-green-900 w-30 h-12">1</div> <div class="bg-green-800 w-30 h-12">2</div> <div class="bg-green-700 w-30 h-12">3</div> <div class="bg-green-600 w-30 h-12">4</div> <div class="bg-green-500 w-30 h-12">5</div> <div class="bg-green-400 w-30 h-12">6</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