Jak v Tailwindu používat body přerušení a dotazy na média s „justify-content“?

“ prvek pro změnu vodorovného zarovnání svých položek na střední a velké obrazovce:

< tělo >

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

< / div >

< / tělo >

Tady:

• 'ospravedlnit-start' třída zarovná pružné položky na začátek hlavní osy kontejneru.
• 'md: justify-between' třída rozmístí flexibilní položky podél hlavní osy kontejneru se stejnou vzdáleností mezi nimi na střední obrazovce.
• 'lg:justify-end' třída zarovná ohebné položky na konci hlavní osy kontejneru na velké obrazovce.

Výstup

---

---

Výše uvedený výstup ukazuje, že horizontální zarovnání flexibilních položek se mění s tím, jak se mění velikost obrazovky. To znamená, že zadané body přerušení a dotazy na média byly efektivně použity s obslužným programem „justify-content“.

Závěr

Chcete-li použít body přerušení a dotazy na média s nástroji „justify-content“ v Tailwind, definujte požadovanou hodnotu pro 'ospravedlnit-' nástroj pro různé velikosti obrazovky pomocí „ md “ nebo „ lg ”body zlomu. Pro ověření změňte velikost obrazovky webové stránky a zajistěte změny. Tento článek demonstroval příklad použití požadovaných zarážek a mediálních dotazů na nástroje „justify-content“ v Tailwindu.