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