Tailwind CSS Justificar elementos

Esta clase acepta dos valores en Tailwind CSS. Es la alternativa a la propiedad de elementos de justificación de CSS . Esta clase se utiliza para controlar cómo se alinean los elementos de la cuadrícula a lo largo de su eje en línea.

Justificar elementos:

  • justificar-elementos-auto 
  • justificar-elementos-comienzo 
  • justificar-elementos-fin 
  • justificar-elementos-centro 
  • justificar-elementos-estirar 

justificar-elementos-auto: esta clase se utiliza para justificar los elementos de la cuadrícula automáticamente en su eje en línea.

Sintaxis:

<element class="justify-items-auto">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head>     
    <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 Justify Items Class</b> 
    <div id="main" class="grid justify-items-auto grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
    </div> 
</body> 
  
</html>

Producción:

«justify-items-start»: esta clase se usa para justificar los elementos de la cuadrícula contra el inicio de su eje en línea.

Sintaxis:

<element class="justify-items-start">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head>    
    <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 Justify Items Class</b> 
    <div id="main" class="grid justify-items-start grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 
</html>

Producción:

«justify-items-end»: esta clase se usa para justificar los elementos de la cuadrícula contra el final de su eje en línea.

Sintaxis:

<element class="justify-items-end">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head>    
    <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 Justify Items Class</b> 
    <div id="main" class="grid justify-items-end grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 
  
</html>

Producción:

justificar-elementos-centro: esta clase se utiliza para justificar los elementos de la cuadrícula a lo largo de su eje en línea.

Sintaxis:

<element class="jjustify-items-center">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head>    
    <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 Justify Items Class</b> 
    <div id="main" class="grid justify-items-center grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 w-20 h-12">6</div>
    </div> 
</body> 
  
</html>

Producción:

«justify-items-stretch»: esta clase se usa para estirar elementos a lo largo de su eje en línea.

Sintaxis:

<element class="justify-items-stretch">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head>    
    <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 Justify Items Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 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 *