Orden CSS de Tailwind

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

Deja una respuesta

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