یہ مضمون ٹیل ونڈ CSS میں فلیکس آئٹمز کو لپیٹنے سے روکنے کے طریقہ کی وضاحت کرے گا۔
فلیکس آئٹمز کو ٹیل ونڈ میں لپیٹنے سے کیسے روکا جائے؟
ٹیل ونڈ میں فلیکس آئٹمز کو لپیٹنے سے روکنے کے لیے، ایک HTML فائل بنائیں۔ پھر، فلیکس آئٹمز کو لپیٹنے سے روکنے کے لیے ایچ ٹی ایم ایل پروگرام میں فلیکس کنٹینر کے ساتھ 'flex-nowrap' یوٹیلیٹی کا استعمال کریں۔ اگلا، HTML ویب صفحہ دیکھ کر تبدیلیوں کو یقینی بنائیں۔
اسے بہتر طور پر سمجھنے کے لیے ذیل میں دیے گئے اقدامات کو آزمائیں۔
مرحلہ 1: فلیکس آئٹمز کو ایچ ٹی ایم ایل پروگرام میں لپیٹنے سے روکیں۔
ایک HTML پروگرام بنائیں اور استعمال کریں ' flex-nowrap فلیکس اشیاء کو لپیٹنے سے روکنے کے لیے مطلوبہ فلیکس کنٹینر کے ساتھ افادیت:
< جسم >
< div کلاس = 'flex flex-nowrap h-40' >
< div کلاس = 'basis-1/4 bg-red-500 m-1' > 1 < / div >
< div کلاس = 'basis-1/3 bg-yellow-500 m-1' > 2 < / div >
< div کلاس = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / جسم >
یہاں:
- ' فلیکس کلاس فلیکس باکس لے آؤٹ کو قابل بناتی ہے۔ عنصر اور بچوں کے عناصر کو ترتیب دینے اور سیدھ میں کرنے کی اجازت دیتا ہے۔
- ' flex-nowrap ” کلاس بتاتی ہے کہ فلیکس آئٹمز کو متعدد لائنوں پر نہیں لپیٹنا چاہئے اور تمام فلیکس اشیاء کو ایک لائن میں رکھنا چاہئے۔
- ' بنیاد-1/4 '،' بنیاد-1/3 '، اور ' بنیاد-1/2 'کلاسیں اندرونی سیٹ کرتی ہیں۔
کی چوڑائی بالترتیب 25%، 33.33%، اور 50% ان کے بنیادی عناصر کے لیے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کو یقینی بنانے کے لیے کہ فلیکس اشیاء کو لپیٹ نہیں کیا گیا ہے، HTML ویب صفحہ دیکھیں:
مندرجہ بالا ویب صفحہ میں، فلیکس آئٹمز ایک ہی لائن میں ہیں اور انہیں لپیٹ نہیں کیا گیا ہے۔
نتیجہ
ٹیل ونڈ میں فلیکس آئٹمز کو لپیٹنے سے روکنے کے لیے، HTML پروگرام میں مطلوبہ فلیکس کنٹینر کے ساتھ 'flex-nowrap' یوٹیلیٹی کا استعمال کریں۔ یہ افادیت فلیکس اشیاء کو لپیٹنے سے روکتی ہے۔ تصدیق کے لیے، ویب صفحہ پر تبدیلیاں دیکھیں۔ اس مضمون میں فلیکس آئٹمز کو Tailwind CSS میں لپیٹنے سے روکنے کے طریقے کی وضاحت کی گئی ہے۔