Come applicare punti di interruzione e query multimediali con 'justify-content' in Tailwind?

' elemento per modificare l'allineamento orizzontale dei suoi elementi su schermi di dimensioni medie e grandi:

< corpo >

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

< / div >

< / corpo >

Qui:

• 'giustificare-inizio' class allinea gli elementi flessibili all'inizio dell'asse principale del contenitore.
• 'md:giustificare-tra' class distribuisce gli elementi flessibili lungo l'asse principale del contenitore con uguale spaziatura tra loro su schermi di medie dimensioni.
• 'lg:giustifica-fine' class allinea gli elementi flessibili all'estremità dell'asse principale del contenitore su uno schermo di grandi dimensioni.

Produzione

---

---

L'output precedente mostra che l'allineamento orizzontale degli elementi flessibili cambia al variare delle dimensioni dello schermo. Ciò indica che i punti di interruzione e le query multimediali specificati sono stati effettivamente applicati con l'utilità 'justify-content'.

Conclusione

Per applicare punti di interruzione e media query con le utilità 'justify-content' in Tailwind, definisci il valore desiderato in the 'giustificare-' utility per schermi di varie dimensioni utilizzando il ' md ' O ' LG ” punti di interruzione. Per la verifica, modifica le dimensioni dello schermo della pagina Web e assicurati le modifiche. Questo articolo ha dimostrato l'esempio per applicare i punti di interruzione desiderati e le query multimediali sulle utilità 'justify-content' in Tailwind.