Esta clase acepta muchos valores en Tailwind CSS . Es la alternativa a la propiedad CSS Align Content . Esta clase se usa para cambiar el comportamiento de la propiedad flex-wrap . Alinea líneas flexibles. Se utiliza para especificar la alineación entre las líneas dentro de un contenedor flexible. Esta propiedad define cómo se alinea cada línea flexible dentro de un cuadro flexible y solo se aplica si se aplica envoltura flexible: envoltura , es decir, si hay varias líneas de elementos de caja flexible presentes.
Alinear clases de contenido:
- centro de contenido
- inicio de contenido
- contenido final
- contenido-entre
- contenido alrededor
- contenido uniformemente
content-center: esta clase se usa para colocar líneas en el centro del contenedor flexible.
Sintaxis:
<element class="content-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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-center bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
content-start: esta clase se usa para colocar líneas al comienzo del contenedor flexible.
Sintaxis:
<element class="content-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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-start bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
content-end: esta clase se usa para colocar líneas al final del contenedor flexible.
Sintaxis:
<element class="content-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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-end bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
contenido entre: esta clase se usa para distribuir filas en un contenedor de modo que haya la misma cantidad de espacio entre cada línea.
Sintaxis:
<element class="content-between">...</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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-between bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
content-around: esta clase se usa para distribuir filas en un contenedor de modo que haya la misma cantidad de espacio alrededor de cada línea.
Sintaxis:
<element class="content-around">...</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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-around bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>
Producción:
content-evenly: esta clase se usa para distribuir filas en un contenedor de modo que haya la misma cantidad de espacio alrededor de cada elemento, pero también representa la duplicación del espacio que normalmente vería entre cada elemento cuando se usa la clase content-around .
Sintaxis:
<element class="content-evenly">...</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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap content-evenly bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 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 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