Kako uporabiti prelomne točke in medijske poizvedbe z 'justify-content' v Tailwindu?

” element za spreminjanje vodoravne poravnave svojih elementov na srednji in veliki velikosti zaslona:

< telo >

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

< / div >

< / telo >

Tukaj:

• 'utemelji - začetek' razred poravna elemente flex na začetku glavne osi vsebnika.
• “md:justify-between” Razporedi elemente flex vzdolž glavne osi vsebnika z enakim razmikom med njimi na srednje velikem zaslonu.
• “lg:justify-end” razred poravna elemente flex na koncu glavne osi vsebnika na velikem zaslonu.

Izhod

---

---

Zgornji rezultat kaže, da se vodoravna poravnava elementov flex spreminja, ko se spreminja velikost zaslona. To pomeni, da so bile podane prekinitvene točke in medijske poizvedbe učinkovito uporabljene s pripomočkom 'justify-content'.

Zaključek

Za uporabo prekinitvenih točk in medijskih poizvedb s pripomočki »justify-content« v Tailwindu definirajte želeno vrednost za “utemelji-” pripomoček za različne velikosti zaslona z uporabo » md « ali » lg 'mejne točke. Za preverjanje spremenite velikost zaslona spletne strani in zagotovite spremembe. Ta članek je pokazal primer za uporabo želenih prekinitvenih točk in medijskih poizvedb v pripomočkih za »utemeljitev vsebine« v Tailwindu.