Ako použiť body prerušenia a mediálne dotazy s „ospravedlnením obsahu“ v Tailwinde?

“ prvok na zmenu vodorovného zarovnania svojich položiek na strednej a veľkej obrazovke:

< telo >

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

< / div >

< / telo >

Tu:

• 'ospravedlniť-začať' trieda zarovná flexibilné položky na začiatok hlavnej osi kontajnera.
• 'md: justify-between' trieda rozmiestňuje flexibilné položky pozdĺž hlavnej osi kontajnera s rovnakým rozostupom medzi nimi na obrazovke strednej veľkosti.
• 'lg:justify-end' trieda zarovná flexibilné položky na konci hlavnej osi kontajnera na veľkej obrazovke.

Výkon

---

---

Vyššie uvedený výstup ukazuje, že horizontálne zarovnanie ohybných položiek sa mení podľa toho, ako sa mení veľkosť obrazovky. Znamená to, že špecifikované body prerušenia a mediálne dotazy boli efektívne aplikované pomocou pomôcky „justify-content“.

Záver

Ak chcete použiť body prerušenia a mediálne dopyty s pomôckami „justify-content“ v Tailwinde, definujte požadovanú hodnotu 'ospravedlniť-' pomocný program pre rôzne veľkosti obrazoviek pomocou „ md “ alebo „ lg ” prerušovacie body. Na overenie zmeňte veľkosť obrazovky webovej stránky a zabezpečte zmeny. Tento článok demonštroval príklad použitia požadovaných bodov prerušenia a mediálnych dopytov v pomôckach „justify-content“ v Tailwinde.