Tailwind CSS ofrece varios ' alinear elementos Utilidades para controlar la posición de elementos flexibles y de rejilla a lo largo del eje transversal del contenedor. Estas clases de servicios públicos incluyen 'elementos-inicio', 'elementos-centro', 'elementos-fin', 'elementos-línea de base' y 'elementos-estiramiento'. Además, los usuarios también pueden utilizar los puntos de interrupción y las consultas de medios en la utilidad 'elementos-
Este artículo demostrará el método de aplicar puntos de interrupción y consultas de medios en las utilidades de 'elementos de alineación' en Tailwind.
¿Cómo aplicar puntos de interrupción y consultas de medios con 'elementos de alineación' en Tailwind?
Para aplicar los puntos de interrupción deseados y las consultas de medios en las utilidades de 'justificación de contenido' en Tailwind, cree una estructura HTML. Después de eso, defina el valor específico para el “ elementos-
Ejemplo
En este ejemplo, crearemos un contenedor flexible con la propiedad 'items-start'. Usaremos el “ Maryland ” punto de ruptura con el “ Centro de artículos ” utilidad y “ lg ” punto de ruptura con el “ artículos-fin ” utilidad en el “ Producción Para aplicar puntos de interrupción y consultas de medios con utilidades de 'elementos de alineación' en Tailwind, defina el valor deseado para el ' elementos-
< cuerpo >
< división clase = 'elementos flexibles-inicio md: elementos-centro lg: elementos-fin justificar-alrededor texto-centro h-44 m-3 bg-rosa-300 brecha-4' >
< división clase = 'bg-rosa-600 py-4 w-40' > 1 división >
< división clase = 'bg-rosa-600 py-12 w-40' > 2 división >
< división clase = 'bg-rosa-600 py-8w-40' > 3 división >
división >
cuerpo >
Aquí:
El resultado anterior muestra que la alineación vertical de los elementos flexibles cambia a medida que varía el tamaño de la pantalla. Esto indica que los puntos de interrupción y las consultas de medios especificados se han aplicado de manera efectiva con la utilidad 'alinear elementos'. Conclusión