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