Hvordan anvender man breakpoints og medieforespørgsler med 'justify-content' i Tailwind?

' element for at ændre elementernes vandrette justering på mellem og stor skærmstørrelse:

< legeme >

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

< / div >

< / legeme >

Her:

• 'retfærdiggøre-start' klasse justerer flex-emnerne i begyndelsen af ​​beholderens hovedakse.
• 'md:justify-between' klasse fordeler flex-emnerne langs containerens hovedakse med lige stor afstand mellem dem på mellemstørrelse.
• 'lg:justify-end' klasse justerer flex-emnerne for enden af ​​containerens hovedakse på en stor skærmstørrelse.

Produktion

---

---

Ovenstående output viser, at den vandrette justering af flex-emnerne ændrer sig, efterhånden som skærmstørrelsen varierer. Dette indikerer, at de angivne brudpunkter og medieforespørgsler er blevet effektivt anvendt med 'justify-content'-værktøjet.

Konklusion

For at anvende breakpoints og medieforespørgsler med 'justify-content'-værktøjer i Tailwind skal du definere den ønskede værdi til 'retfærdiggør-' værktøj til forskellige skærmstørrelser ved at bruge ' md ' eller ' lg ” brudpunkter. For at bekræfte skal du ændre websidens skærmstørrelse og sikre ændringer. Denne artikel har vist eksemplet til at anvende ønskede breakpoints og medieforespørgsler på 'justify-content'-værktøjerne i Tailwind.