Kako primijeniti prijelomne točke i medijske upite s 'justify-content' u Tailwindu?

” element za promjenu vodoravnog poravnanja svojih stavki na srednjoj i velikoj veličini zaslona:

< tijelo >

< div razreda = 'savijati justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< div razreda = 'bg-žuta-400 w-24 h-12' > 1 < / div >
< div razreda = 'bg-žuta-400 w-24 h-12' > 2 < / div >
< div razreda = 'bg-žuta-400 w-24 h-12' > 3 < / div >

< / div >

< / tijelo >

Ovdje:

• 'poravnanje-početak' klasa poravnava flex stavke na početku glavne osi spremnika.
• “md:justify-between” klasa distribuira fleksibilne stavke duž glavne osi spremnika s jednakim razmakom između njih na zaslonu srednje veličine.
• “lg:justify-end” klasa poravnava fleksibilne stavke na kraju glavne osi spremnika na velikom zaslonu.

Izlaz

---

---

Gornji rezultat pokazuje da se horizontalno poravnanje fleksibilnih stavki mijenja kako veličina zaslona varira. Ovo označava da su navedene prijelomne točke i medijski upiti učinkovito primijenjeni s pomoćnim programom 'justify-content'.

Zaključak

Za primjenu prijelomnih točaka i medijskih upita s uslužnim programima 'justify-content' u Tailwindu, definirajte željenu vrijednost za “opravdanje-” uslužni program za različite veličine zaslona korištenjem ' doktor medicine ' ili ' lg ” prijelomne točke. Za provjeru promijenite veličinu zaslona web stranice i osigurajte promjene. Ovaj je članak pokazao primjer primjene željenih prijelomnih točaka i medijskih upita na uslužnim programima 'justify-content' u Tailwindu.