Tailwind CSS میں، ' کے درمیان خلا ” افادیت کا استعمال فلیکس یا گرڈ کنٹینرز کے چائلڈ عناصر کے درمیان جگہ کو کنٹرول کرنے کے لیے کیا جاتا ہے۔ یہ بالترتیب بچوں کے عناصر کے درمیان افقی اور عمودی جگہ کو لاگو کرنے کے لیے مختلف کلاسز پیش کرتا ہے، جیسے کہ 'space-x-
یہ گائیڈ Tailwind میں منفی اسپیس ویلیو استعمال کرنے کے طریقہ کار کی مثال دے گا۔
Tailwind میں منفی اسپیس ویلیو کا استعمال کیسے کریں؟
Tailwind میں منفی اسپیس ویلیو استعمال کرنے کے لیے، پہلے ایک HTML ڈھانچہ بنائیں۔ پھر، ڈیش کا استعمال کریں ' - اسے منفی قدر میں تبدیل کرنے کے لیے یوٹیلیٹی کلاسز کے درمیان مطلوبہ 'اسپیس' کے ساتھ۔ ' -space-x-
آئیے اس کو بہتر طور پر سمجھنے کے لیے ذیل کی مثالوں کو دیکھیں۔
مثال 1: عناصر کے درمیان ایک منفی افقی وقفہ کاری کا اطلاق کریں۔
اس مثال میں، ہمارے پاس ایک قطار میں کچھ چائلڈ عناصر کے ساتھ ایک فلیکس کنٹینر ہے۔ ہم استعمال کریں گے ' -اسپیس-ایکس 8 فلیکس عناصر کے درمیان منفی افقی وقفہ لگانے کے لیے کلاس:
< جسم >< div کلاس = 'flex-space-x-8 m-10 h-20 w-max' >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 1 div >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 2 div >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 3 div >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 4 div >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 5 div >
< div کلاس = 'bg-teal-500 w-20 p-5 بارڈر-2 بارڈر-ٹیل-800' > 6 div >
div >
جسم >
یہاں، والدین
-
- ' فلیکس کلاس ایک لچکدار ترتیب بناتی ہے۔
- ' -اسپیس-ایکس 8 کلاس ایک کنٹینر کے اندر فلیکس عناصر کے درمیان منفی افقی وقفہ کی 8 اکائیوں کا اضافہ کرتی ہے۔
- ' m-10 کلاس کنٹینر کے تمام اطراف میں 10 یونٹس کا مارجن شامل کرتی ہے۔
- ' h-20 کلاس کنٹینر کی اونچائی کو 20 یونٹس پر سیٹ کرتی ہے۔
- ' w-max کلاس کنٹینر کی چوڑائی کو اس کے مواد کی زیادہ سے زیادہ چوڑائی پر سیٹ کرتی ہے۔
بچے میں
-
- ' bg-teal-500 کلاس فلیکس عناصر کے پس منظر کو ٹیل پر سیٹ کرتی ہے۔
- ' w-20 کلاس ہر فلیکس آئٹم کی چوڑائی 20 یونٹس پر سیٹ کرتی ہے۔
- ' p-5 کلاس ہر فلیکس آئٹم کے چاروں طرف پیڈنگ کی 5 یونٹس کا اضافہ کرتی ہے۔
- ' بارڈر-2 کلاس کنٹینر کی سرحد کی چوڑائی کو 2 یونٹس پر سیٹ کرتی ہے۔
- ' بارڈر ٹیل 800 کلاس بارڈر پر نیلے رنگ کا اطلاق کرتی ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ فلیکس عناصر اوورلیپ ہو رہے ہیں۔ اس سے ظاہر ہوتا ہے کہ منفی افقی جگہ کی قدر کامیابی کے ساتھ لاگو ہو گئی ہے۔
مثال 2: عناصر کے درمیان ایک منفی عمودی وقفہ کاری کا اطلاق کریں۔
اس مثال میں، ہمارے پاس ایک فلیکس کنٹینر ہے جس میں ایک کالم میں کچھ چائلڈ عناصر ہیں۔ ہم استعمال کریں گے ' -space-y-7 فلیکس عناصر کے درمیان منفی عمودی وقفہ لگانے کے لیے کلاس:
< جسم >< div کلاس = 'flex flex-col-space-y-7 m-10 text-center' >
< div کلاس = 'bg-teal-500 p-5 بارڈر-2 بارڈر-ٹیل-800' > 1 div >
< div کلاس = 'bg-teal-500 p-5 بارڈر-2 بارڈر-ٹیل-800' > 2 div >
< div کلاس = 'bg-teal-500 p-5 بارڈر-2 بارڈر-ٹیل-800' > 3 div >
< div کلاس = 'bg-teal-500 p-5 بارڈر-2 بارڈر-ٹیل-800' > 4 div >
div >
جسم >
یہاں:
-
- ' فلیکس کلاس ایک لچکدار ترتیب بناتی ہے۔
- ' flex-col ” کلاس فلیکس اشیاء کو عمودی سمت میں ترتیب دیتا ہے۔
- ' -اسپیس-ی-5 کلاس ایک کنٹینر کے اندر فلیکس عناصر کے درمیان منفی عمودی وقفہ کاری کی 7 اکائیوں کا اضافہ کرتی ہے۔
- ' m-10 کلاس کنٹینر کے تمام اطراف میں 10 یونٹس کا مارجن شامل کرتی ہے۔
- ' متن کا مرکز کلاس کنٹینر کے متن کو مرکز میں سیدھ میں کرتی ہے۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ فلیکس عناصر اوورلیپ ہو رہے ہیں۔ اس سے ظاہر ہوتا ہے کہ منفی عمودی جگہ کی قدر کامیابی کے ساتھ لاگو ہو گئی ہے۔
نتیجہ
Tailwind میں منفی اسپیس ویلیو استعمال کرنے کے لیے، ' -space-x-