El orden es una de las mejores características de Tailwind CSS. Al usar esta clase, podemos ordenar los elementos flexibles y de cuadrícula de acuerdo con nuestros requisitos. Hay muchas clases de orden. Esta clase se utiliza para renderizar elementos flexibles y de cuadrícula en un orden diferente al que aparecen en el DOM.
Ordenar:
- orden-1
- orden-2
- orden-3
- orden-4
- pedido-5
- orden-6
- orden-7
- orden-8
- orden-9
- orden-10
- orden-11
- orden-12
- ordenar primero
- último pedido
- pedido-ninguno
Sintaxis:
<element order- number | string >
Parámetro: Esta clase acepta dos tipos de parámetros, pero uno a la vez, solo puede seguir el número de orden o la posición que mencionarás.
- number: Número entero a seguir del índice de orden.
- string: en la posición del índice de orden de palabras, solo acepte el último y el primero.
Ejemplo: En este ejemplo, configuramos el último pedido en el primer artículo flexible y el pedido primero en el quinto artículo flexible, ahora puede ver que la lista de pedidos es diferente de la normal.
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind order 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 order Class</b> <div id="main" class="flex flex-row justify-evenly"> <div class="bg-green-900 order-last 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 order-first w-24 h-12">5</div> <div class="bg-green-400 w-24 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