Tailwind میں 'justify-content' کے ساتھ بریک پوائنٹس اور میڈیا سوالات کا اطلاق کیسے کریں؟

' عنصر اپنی اشیاء کی افقی سیدھ کو درمیانے اور بڑے اسکرین کے سائز پر تبدیل کرنے کے لیے:

< جسم >

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

< / div >

< / جسم >

یہاں:

• 'جائز شروع کریں' کلاس کنٹینر کے مرکزی محور کے شروع میں فلیکس اشیاء کو سیدھ میں کرتا ہے۔
• 'ایم ڈی: کے درمیان جواز بنائیں' کلاس فلیکس آئٹمز کو کنٹینر کے مرکزی محور کے ساتھ درمیانی اسکرین کے سائز پر ان کے درمیان مساوی وقفہ کے ساتھ تقسیم کرتا ہے۔
• 'lg: justify-end' کلاس ایک بڑی سکرین کے سائز پر کنٹینر کے مرکزی محور کے آخر میں فلیکس آئٹمز کو سیدھ میں لاتا ہے۔

آؤٹ پٹ

---

---

مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ فلیکس آئٹمز کی افقی سیدھ تبدیل ہو رہی ہے کیونکہ اسکرین کا سائز مختلف ہوتا ہے۔ اس سے ظاہر ہوتا ہے کہ مخصوص بریک پوائنٹس اور میڈیا کے سوالات کو 'justify-content' افادیت کے ساتھ مؤثر طریقے سے لاگو کیا گیا ہے۔

نتیجہ

Tailwind میں 'جائز-مواد' کی افادیت کے ساتھ بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے لیے، مطلوبہ قدر کی وضاحت کریں 'جائز کرنا-' 'کا استعمال کرکے مختلف اسکرین سائز کے لیے افادیت md 'یا' ایل جی 'بریک پوائنٹس۔ تصدیق کے لیے، ویب صفحہ کی اسکرین کا سائز تبدیل کریں اور تبدیلیوں کو یقینی بنائیں۔ اس مضمون نے Tailwind میں 'جائز-مواد' کی افادیت پر مطلوبہ بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کی مثال کا مظاہرہ کیا ہے۔