Paano Mag-apply ng Mga Breakpoint at Media Query na may 'justify-content' sa Tailwind?

” elemento upang baguhin ang pahalang na pagkakahanay ng mga item nito sa katamtaman at malaking laki ng screen:

< katawan >

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

< / div >

< / katawan >

dito:

• “justify-start” itina-align ng klase ang mga flex na item sa simula ng pangunahing axis ng container.
• “md:justify-between” ibinabahagi ng klase ang mga flex na item sa kahabaan ng pangunahing axis ng container na may pantay na espasyo sa pagitan ng mga ito sa katamtamang laki ng screen.
• “lg:justify-end” inaayos ng klase ang mga flex na item sa dulo ng pangunahing axis ng container sa isang malaking laki ng screen.

Output

---

---

Ipinapakita ng output sa itaas na nagbabago ang pahalang na pagkakahanay ng mga flex na item habang nag-iiba-iba ang laki ng screen. Ipinapahiwatig nito na ang mga tinukoy na breakpoint at mga query sa media ay epektibong nailapat sa utility na 'justify-content'.

Konklusyon

Para sa paglalapat ng mga breakpoint at mga query sa media na may mga utility na 'justify-content' sa Tailwind, tukuyin ang nais na halaga sa “justify-” utility para sa iba't ibang laki ng screen sa pamamagitan ng paggamit ng ' md 'o' lg ” breakpoints. Para sa pag-verify, baguhin ang laki ng screen ng web page at tiyakin ang mga pagbabago. Ipinakita ng artikulong ito ang halimbawa ng paglalapat ng mga gustong breakpoint at mga query sa media sa mga utility na 'justify-content' sa Tailwind.