Como aplicar pontos de interrupção e consultas de mídia com “justify-content” no Tailwind?

” elemento para alterar o alinhamento horizontal de seus itens em tamanho de tela médio e grande:

< corpo >

< div aula = 'flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< div aula = 'bg-yellow-400 w-24 h-12' > 1 < / div >
< div aula = 'bg-yellow-400 w-24 h-12' > 2 < / div >
< div aula = 'bg-yellow-400 w-24 h-12' > 3 < / div >

< / div >

< / corpo >

Aqui:

• “justificar-iniciar” A classe alinha os itens flexíveis no início do eixo principal do contêiner.
• “md:justificar-entre” class distribui os flex items ao longo do eixo principal do container com espaçamento igual entre eles em tamanho de tela médio.
• “lg: justify-end” A classe alinha os itens flexíveis no final do eixo principal do contêiner em uma tela grande.

Saída

---

---

A saída acima mostra que o alinhamento horizontal dos itens flexíveis está mudando conforme o tamanho da tela varia. Isso indica que os pontos de interrupção e consultas de mídia especificados foram efetivamente aplicados com o utilitário “justify-content”.

Conclusão

Para aplicar pontos de interrupção e consultas de mídia com utilitários “justify-content” no Tailwind, defina o valor desejado para o “justificar-” utilitário para vários tamanhos de tela, utilizando o “ md ' ou ' lg ” pontos de interrupção. Para verificação, altere o tamanho da tela da página da web e garanta as alterações. Este artigo demonstrou o exemplo para aplicar pontos de interrupção e consultas de mídia desejados nos utilitários “justify-content” no Tailwind.