Kuinka käyttää keskeytyspisteitä ja mediakyselyitä 'justify-sisällöllä' Tailwindissä?

' elementti muuttaa sen kohteiden vaakasuoraa kohdistusta keskikokoisella ja suurella näytöllä:

< kehon >

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

< / div >

< / kehon >

Tässä:

• 'perustella-aloitus' luokka kohdistaa joustavat kohteet säiliön pääakselin alkuun.
• 'md:justify-beveen' luokka jakaa joustavat kohteet kontin pääakselille tasavälein keskikokoisella näytöllä.
• 'lg:justify-end' luokka kohdistaa joustavat kohteet säiliön pääakselin päähän suurelle näytölle.

Lähtö

---

---

Yllä oleva tulos osoittaa, että taipuvien kohteiden vaakasuora kohdistus muuttuu näytön koon muuttuessa. Tämä osoittaa, että määritetyt keskeytyskohdat ja mediakyselyt on käytetty tehokkaasti 'justify-content' -apuohjelmalla.

Johtopäätös

Jos haluat käyttää keskeytyskohtia ja mediakyselyitä 'justify-content' -apuohjelmilla Tailwindissä, määritä haluamasi arvo 'perustella- ' apuohjelma eri näyttökokoille käyttämällä ' md ' tai ' lg ”katkospisteitä. Vahvista muuttamalla verkkosivun näytön kokoa ja varmistamalla muutokset. Tämä artikkeli on osoittanut esimerkin haluttujen keskeytyskohtien ja mediakyselyjen soveltamisesta Tailwindin 'justify-content' -apuohjelmiin.