Cum să aplici punctele de întrerupere și interogările media cu „justify-content” în Tailwind?

” element pentru a modifica alinierea orizontală a elementelor sale pe dimensiunea ecranului mediu și mare:

< corp >

< div clasă = „flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700” >
< div clasă = „bg-galben-400 w-24 h-12” > 1 < / div >
< div clasă = „bg-galben-400 w-24 h-12” > 2 < / div >
< div clasă = „bg-galben-400 w-24 h-12” > 3 < / div >

< / div >

< / corp >

Aici:

• „justificare-pornire” clasa aliniază articolele flexibile la începutul axei principale a containerului.
• „md:justify-between” clasa distribuie articolele flexibile de-a lungul axei principale a containerului, cu o distanță egală între ele, pe ecran de dimensiune medie.
• „lg:justify-end” clasa aliniază elementele flexibile la capătul axei principale a containerului pe o dimensiune mare a ecranului.

Ieșire

---

---

Rezultatul de mai sus arată că alinierea orizontală a elementelor flexibile se modifică pe măsură ce dimensiunea ecranului variază. Acest lucru indică faptul că punctele de întrerupere specificate și interogările media au fost aplicate efectiv cu utilitarul „justify-content”.

Concluzie

Pentru aplicarea punctelor de întrerupere și a interogărilor media cu utilitare „justify-content” în Tailwind, definiți valoarea dorită pentru „justificare-” utilitar pentru diferite dimensiuni de ecran prin utilizarea „ md ” sau ” lg ” puncte de întrerupere. Pentru verificare, modificați dimensiunea ecranului paginii web și asigurați-vă modificările. Acest articol a demonstrat exemplul de aplicare a punctelor de întrerupere și a interogărilor media dorite pe utilitarele „justify-content” din Tailwind.