Esta clase acepta muchos valores en Tailwind CSS . Es la alternativa a la propiedad CSS Place Items . Esta clase se utiliza para controlar cómo se justifican y alinean los elementos al mismo tiempo. Por lo tanto, la clase de elementos de lugar puede contener el valor de los valores de clase de elementos de alineación y elementos de justificación .
Coloque las clases de artículos:
- colocar-elementos-auto
- colocar-elementos-comienzo
- colocar-elementos-fin
- colocar-elementos-centro
- colocar-elementos-estirar
place-items-auto: si los elementos no tienen padres, se usa esta clase que define la posición absoluta.
Sintaxis:
<element class="place-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 Place Items Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-auto h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-items-start: esta clase muestra las líneas al comienzo del contenedor flexible.
Sintaxis:
<element class="place-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 Place Items Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-start h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-items-end: esta clase muestra las líneas flexibles al final del contenedor flexible.
Sintaxis:
<element class="place-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 Place Items Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-end h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-items-center: esta clase alinea los elementos flexibles en el centro del contenedor.
Sintaxis:
<element class="place-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 Place Items Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-center h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-items-stretch: esta clase define que la línea se estiró para ocupar el espacio restante del contenedor flexible. Es el valor predeterminado.
Sintaxis:
<element class="place-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 Place Items Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-stretch h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4">1</div> <div class="bg-green-800 w-3/4">2</div> <div class="bg-green-700 w-3/4">3</div> <div class="bg-green-600 w-3/4">4</div> <div class="bg-green-500 w-3/4">5</div> <div class="bg-green-400 w-3/4">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