¿Cómo aplicar Breakpoints y Media Queries con “justify-content” en Tailwind?

” elemento para cambiar la alineación horizontal de sus elementos en tamaño de pantalla mediano y grande:

< cuerpo >

    < división clase = 'flex justifica-comienza md: justifica-entre lg: justifica-finaliza brecha-3 m-3 bg-verde azulado-700' >
      < división clase = 'bg-amarillo-400 w-24 h-12' > 1 < / división >
      < división clase = 'bg-amarillo-400 w-24 h-12' > 2 < / división >
      < división clase = 'bg-amarillo-400 w-24 h-12' > 3 < / división >

    < / división >

< / cuerpo >

Aquí:

• “justificar-comenzar” class alinea los elementos flexibles al comienzo del eje principal del contenedor.
• “md:justificar-entre” class distribuye los elementos flexibles a lo largo del eje principal del contenedor con el mismo espacio entre ellos en un tamaño de pantalla mediano.
• 'lg:justificar-fin' class alinea los elementos flexibles al final del eje principal del contenedor en un tamaño de pantalla grande.

Producción

---

---

El resultado anterior muestra que la alineación horizontal 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 'justify-content'.

Conclusión

Para aplicar puntos de interrupción y consultas de medios con utilidades de 'justificación de contenido' en Tailwind, defina el valor deseado para el “justificar-” utilidad para varios tamaños de pantalla utilizando el ' Maryland ' o ' lg ” puntos de interrupción. Para la verificación, cambie el tamaño de la pantalla de la página web y asegúrese de realizar los cambios. Este artículo ha demostrado el ejemplo para aplicar puntos de interrupción deseados y consultas de medios en las utilidades de 'justificación de contenido' en Tailwind.