Flexbox جنریٹر
بصری کنٹرولز کے ساتھ فلیکس کنٹینر اور اس کے آئٹمز کو سیٹ کریں، لے آؤٹ کو لائیو تبدیل ہوتے دیکھیں، اور ایک کلک میں CSS کاپی کریں۔
آپ کا لے آؤٹ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
عمومی سوالات
justify-content اور align-items میں کیا فرق ہے؟
Justify-content آئٹمز کو مرکزی محور (main axis) کے ساتھ فاصلہ دیتا ہے — جس سمت میں رو یا کالم چلتا ہے — جبکہ align-items انہیں دوسرے محور پر ترتیب دیتا ہے۔ سمت کو رو سے کالم میں تبدیل کریں تو دونوں محور آپس میں بدل جاتے ہیں، جس سے justify-content اوپر سے نیچے اور align-items بائیں سے دائیں کام کرنے لگتا ہے۔
فی آئٹم کنٹرولز کیسے کام کرتے ہیں؟
کسی آئٹم کو اس کے نمبر سے منتخب کریں، پھر سیٹ کریں کہ وہ فالتو جگہ کو بھرنے کے لیے کتنا بڑھے گا (grow)، جگہ تنگ ہونے پر کتنا سکڑے گا (shrink)، اس کا ابتدائی سائز (basis) کیا ہوگا اور اس کی اپنی سیدھ کیا ہوگی۔ Order آئٹم کو HTML میں تبدیلی کیے بغیر اسکرین پر پہلے یا بعد میں منتقل کرتا ہے۔ صرف ان آئٹمز کو جنہیں آپ تبدیل کرتے ہیں، CSS میں اپنا الگ رول ملتا ہے۔
wrap اور align-content کب اہمیت رکھتے ہیں؟
ریپنگ آف ہونے پر، ہر آئٹم کو ایک ہی لائن پر رہنے کے لیے مجبور کیا جاتا ہے اور وہ تنگ ہو سکتا ہے۔ اسے آن کریں تو جو آئٹمز فٹ نہیں آتے وہ اگلی لائن پر چلے جاتے ہیں — تب align-content کام شروع کرتا ہے اور لائنوں کو بطور گروپ فاصلہ دیتا ہے۔ Gap مارجن کے بغیر آئٹمز اور لائنوں کے درمیان فاصلہ سیٹ کرتا ہے۔