Flexbox پلے گراؤنڈ

Flexbox پلے گراؤنڈ کے بارے میں

فلیکس باکس پلے گراؤنڈ CSS flexbox کے لیے ایک عملی سینڈ باکس ہے۔ کنٹینر کی خصوصیات — flex-direction، flex-wrap، justify-content، align-items، align-content اور gap — سیٹ کریں اور دیکھیں کہ ہر ویلیو بدلنے پر پیش منظر میں 12 تک لائیو آئٹمز کیسے دوبارہ ترتیب پاتے ہیں۔ ہر خاصیت اصل میں کیا کرتی ہے، یہ سمجھنے کا یہ سب سے تیز طریقہ ہے۔

آئٹمز الگ الگ قابلِ ترمیم ہیں: کسی ایک پر کلک کر کے اسے منتخب کریں اور اس کے flex-grow، flex-shrink، flex-basis، align-self اور order کو ایڈجسٹ کریں۔ ایک آئٹم کو خالی جگہ بھرتے ہوئے بڑھتا دیکھنا جبکہ اس کے ساتھی اپنی چوڑائی برقرار رکھتے ہیں، فلیکس سائزنگ ماڈل کسی بھی ڈایاگرام سے زیادہ تیزی سے سکھاتا ہے۔

یہ پلے گراؤنڈ کنٹینر اور غیر ڈیفالٹ سیٹنگز والے کسی بھی آئٹم کے لیے صاف ستھرا CSS تیار کرتا ہے — اسے سیدھا اپنی اسٹائل شیٹ میں کاپی کریں۔ سب کچھ آپ کے براؤزر میں چلتا ہے، کچھ بھی اپ لوڈ نہیں ہوتا، اور ایک ری سیٹ بٹن آپ کو خالی حالت پر واپس لے آتا ہے۔

Flexbox پلے گراؤنڈ استعمال کرنے کا طریقہ

1. کنٹینر کا flex-direction، wrap، justify-content، align-items، align-content اور gap سیٹ کریں۔
2. اپنے حقیقی کمپوننٹ کی نقل کرنے کے لیے آئٹمز شامل یا ہٹائیں — 2 سے 12 کے درمیان۔
3. کسی آئٹم پر کلک کریں اور اس کا grow، shrink، basis، align-self اور order ایڈجسٹ کریں۔
4. ہر تبدیلی کے ساتھ لائیو پیش منظر کو اپ ڈیٹ ہوتے دیکھیں۔
5. تیار شدہ CSS کاپی کریں اور اپنے پروجیکٹ میں چسپاں کریں۔

اکثر پوچھے جانے والے سوالات