Hvordan bruke pausepunkter og medieforespørsler med 'justify-content' i Tailwind?

» element for å endre elementenes horisontale justering på middels og stor skjermstørrelse:

< kropp >

< 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 >

< / kropp >

Her:

• 'rettferdiggjøre-start' klasse justerer flex-elementene ved begynnelsen av beholderens hovedakse.
• 'md:justify-between' klasse fordeler flex-elementene langs beholderens hovedakse med lik avstand mellom dem på middels skjermstørrelse.
• «lg:justify-end» klasse justerer flex-elementene ved enden av beholderens hovedakse på en stor skjermstørrelse.

Produksjon

---

---

Utdataene ovenfor viser at den horisontale justeringen av flex-elementene endres ettersom skjermstørrelsen varierer. Dette indikerer at de spesifiserte bruddpunktene og mediespørringene effektivt har blitt brukt med 'justify-content'-verktøyet.

Konklusjon

For å bruke bruddpunkter og mediespørringer med 'justify-content'-verktøy i Tailwind, definer ønsket verdi til «rettferdig-» verktøy for forskjellige skjermstørrelser ved å bruke ' md ' eller ' lg ” bruddpunkter. For bekreftelse, endre nettsidens skjermstørrelse og sørge for endringer. Denne artikkelen har demonstrert eksempelet for å bruke ønskede bruddpunkter og mediespørringer på «justify-content»-verktøyene i Tailwind.