Tailwind CSS Justify Self

Esta clase acepta dos valores en Tailwind CSS. Las diferentes propiedades están cubiertas en el formulario de clase. Es la alternativa a la propiedad de autojustificación de CSS . Esta clase se usa para especificar la alineación de la posición de un contenido junto con el eje apropiado en una cuadrícula CSS.

Justifique las opciones de clase propia:

  • justificar-auto-auto 
  • justificar-auto-inicio 
  • justificar-auto-fin 
  • justificar-auto-centrado 
  • justificar-auto-estiramiento 

justificar-auto-auto: Es el valor utilizado para alinear un elemento en función del valor de la clase justificar-elementos de la cuadrícula .

Sintaxis:

<element class="justify-self-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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-auto 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> 
</body> 
  
</html>

Producción:

justificar-autoinicio: Permite que el contenido se alinee a la izquierda de la celda.

Sintaxis:

<element class="justify-self-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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-start 
            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> 
</body> 
  
</html>

Producción:

justify-self-end: Permite que el contenido se alinee a la derecha de la celda.

Sintaxis:

<element class="justify-self-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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-end 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> 
</body> 
  
</html>

Producción:

justify-self-center:  Permite que el contenido se alinee con el centro de la celda.

Sintaxis:

<element class="justify-self-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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-center 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> 
</body> 
  
</html>

Producción:

justify-self-stretch: Es el valor por defecto de esta propiedad y hace que el contenido ocupe todo el ancho de la celda.

Sintaxis:

<element class="justify-self-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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-stretch 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> 
</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 *