Hogyan lehet töréspontokat és médialekérdezéseket alkalmazni „igazoló tartalommal” a Tailwindben?

' elem az elemek vízszintes igazításának megváltoztatásához közepes és nagy képernyőn:

< test >

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

< / div >

< / test >

Itt:

• „Indoklás-kezdés” osztály a flex elemeket a tároló főtengelyének elejére igazítja.
• 'md: justify-beveen' osztály osztja el a flex elemeket a konténer főtengelye mentén, köztük egyenlő távolsággal közepes képernyőméreten.
• 'lg:justify-end' osztály a flexibilis elemeket a tároló főtengelyének végéhez igazítja egy nagy képernyőn.

Kimenet

---

---

A fenti kimenet azt mutatja, hogy a flex elemek vízszintes igazítása a képernyő méretének változásával változik. Ez azt jelzi, hogy a megadott töréspontokat és médialekérdezéseket hatékonyan alkalmazták a „justify-content” segédprogrammal.

Következtetés

Ha töréspontokat és médialekérdezéseket szeretne alkalmazni „justify-content” segédprogramokkal a Tailwindben, adja meg a kívánt értéket a „igazolja-<érték>” segédprogram különféle képernyőméretekhez a „ md ” vagy „ lg ” töréspontok. Az ellenőrzéshez módosítsa a weboldal képernyőméretét, és gondoskodjon a változtatásokról. Ez a cikk bemutatja a kívánt töréspontok és médialekérdezések alkalmazásának példáját a Tailwind „justify-content” segédprogramjain.