فلیکس باکس یا فلیکس کنٹینر ایک لے آؤٹ ہے جو صارفین کو کنٹینر کے اندر عناصر کو سیدھ میں لانے اور تقسیم کرنے کے قابل بناتا ہے۔ Tailwind CSS فلیکس باکس بنانے اور اس کے ساتھ کام کرنے کے لیے مختلف یوٹیلیٹی کلاسز پیش کرتا ہے۔ ایک باکس لیول فلیکس کنٹینر ایک فلیکس کنٹینر ہے جو بلاک لیول کے عنصر کی طرح برتاؤ/کام کرتا ہے اور ایک بلاک بناتا ہے۔ یہ اپنے بنیادی عنصر کی پوری چوڑائی لیتا ہے اور اپنے بعد ایک نئی لائن بناتا ہے۔
یہ تحریر ٹیل ونڈ میں بلاک لیول فلیکس کنٹینر بنانے کے طریقہ کار کی مثال دے گی۔
ٹیل ونڈ میں بلاک لیول فلیکس کنٹینر کیسے بنایا جائے؟
Tailwind میں ایک خاص بلاک لیول فلیکس کنٹینر بنانے کے لیے، ایک HTML ڈھانچہ بنائیں۔ پھر، شامل کریں ' فلیکس مطلوبہ
نحو
< div کلاس = 'فلیکس...' >
...
div >
کوڈ
< جسم >
< div کلاس = 'فلیکس گیپ -2 ایم -2 بارڈر -2 بارڈر بلیک' >
< div کلاس = 'bg-yellow-500 p-4' > پہلی آئٹم div >
< div کلاس = 'bg-yellow-500 p-4' > دوسرا آئٹم div >
< div کلاس = 'bg-yellow-500 p-4' > تیسرا آئٹم div >
div >
جسم >
یہاں، پیرنٹ
-
- ' فلیکس کلاس کو بلاک لیول فلیکس کنٹینر بنانے کے لیے استعمال کیا جاتا ہے۔
- ' gap-2 کلاس فلیکس کے چائلڈ عناصر کے درمیان وقفہ کاری کی 2 اکائیوں کا اضافہ کرتی ہے۔
- ' m-2 کلاس کنٹینر کے تمام اطراف میں مارجن کی 2 اکائیوں کا اضافہ کرتی ہے۔
- ' بارڈر-2 کلاس 2 یونٹ چوڑائی والے کنٹینر میں بارڈر شامل کرتی ہے۔
- ' سرحدی سیاہ کلاس بارڈر کا رنگ سیاہ پر سیٹ کرتی ہے۔
بچوں کے لچکدار عناصر میں:
-
- ' bg-yellow-500 کلاس فلیکس آئٹم کے پس منظر پر پیلے رنگ کا اطلاق کرتی ہے۔
- ' p-4 کلاس فلیکس آئٹمز کے تمام اطراف میں 4 یونٹوں کی پیڈنگ کا اضافہ کرتی ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، بارڈر اس بات کی نمائندگی کرتا ہے کہ کنٹینر ایک بلاک لیول فلیکس کنٹینر ہے، جو اپنے بنیادی عنصر (براؤزر) کی پوری چوڑائی پر قبضہ کرتا ہے۔
متبادل طور پر، صارف ویب صفحہ پر فلیکس کنٹینر عنصر کا معائنہ کر کے اس بات کو یقینی بنا سکتا ہے:
مندرجہ بالا آؤٹ پٹ اشارہ کرتا ہے کہ کنٹینر بلاک سطح کا فلیکس کنٹینر ہے۔
نتیجہ:
ٹیل ونڈ میں بلاک لیول فلیکس کنٹینر بنانے کے لیے، اسے شامل کرنے کی ضرورت ہے۔ فلیکس مخصوص کنٹینر کے ساتھ یوٹیلیٹی کلاس اور اس کے چائلڈ عناصر کی وضاحت کریں۔ صارفین اپنی ضروریات کے مطابق فلیکس آئٹمز کی وضاحت اور ترمیم کرسکتے ہیں۔ تصدیق کے لیے، کنٹینر میں بارڈر شامل کریں اور ویب صفحہ دیکھیں یا ویب صفحہ پر اس عنصر کا معائنہ کریں۔ اس مضمون میں ٹیل ونڈ میں بلاک لیول فلیکس کنٹینر بنانے کا طریقہ بتایا گیا ہے۔