سی ایس ایس فلیکس باکس لے آؤٹ کی بنیاد
سی ایس ایس فلیکس باکس (CSS Flexbox) ویب ڈیزائننگ میں ایک انتہائی اہم اور لچکدار لے آؤٹ ماڈل ہے۔ یہ ڈیزائنرز کو اس بات کی سہولت دیتا ہے کہ وہ عناصر کو ایک جہتی (one-dimensional) قطار یا کالم میں آسانی سے ترتیب دے سکیں۔ اس ماڈل کا بنیادی مقصد یہ ہے کہ کنٹینر کے اندر موجود آئٹمز اپنی دستیاب جگہ کے مطابق خود کو ڈھال سکیں۔ فلیکس باکس کے ذریعے عام لے آؤٹ پیٹرنز جیسے کہ عناصر کو بالکل مرکز میں لانا، نیویگیشن بار بنانا، عناصر کا اسٹیک تیار کرنا، کارڈز کی ترتیب، اور سائیڈ بار بنانا انتہائی آسان ہو جاتا ہے۔ یہ خصوصیات ویب سائٹس کو ریسپونسیو (responsive) بنانے میں مدد دیتی ہیں تاکہ لے آؤٹ ہر اسکرین سائز پر درست نظر آئے۔
کنٹینر کی خصوصیات اور ان کا عمل
فلیکس باکس لے آؤٹ کا آغاز ایک پیرنٹ کنٹینر سے ہوتا ہے۔ "Flexbox جنریٹر" میں آپ کو کنٹینر کی سطح پر درج ذیل کنٹرولز ملتے ہیں جو پورے لے آؤٹ کے ڈھانچے کو کنٹرول کرتے ہیں:
- سمت (Direction): یہ طے کرتا ہے کہ آئٹمز کس سمت میں ترتیب پائیں گے۔ اس کے اختیارات میں رو (Row)، رو ریورس، کالم (Column)، اور کالم ریورس شامل ہیں۔
- ریپ (Wrap): یہ کنٹرول کرتا ہے کہ اگر جگہ کم ہو تو آئٹمز اگلی لائن پر جائیں گے یا نہیں۔ اس میں کوئی ریپ نہیں، ریپ، اور ریپ ریورس کے اختیارات دستیاب ہیں۔
- مواد کی ترتیب (Justify content): یہ مرکزی محور پر آئٹمز کے درمیان اور ان کے ارد گرد کی جگہ کو تقسیم کرتا ہے۔ اس کے اختیارات میں شروع، آخر، مرکز، درمیان میں فاصلہ (Space between)، ارد گرد فاصلہ (Space around)، اور برابر فاصلہ (Space evenly) شامل ہیں۔
- آئٹمز کی سیدھ (Align items): یہ کراس محور پر آئٹمز کی سیدھ کو کنٹرول کرتا ہے۔ اس میں شروع، آخر، مرکز، کھینچیں (Stretch)، اور بیس لائن کے اختیارات موجود ہیں۔
- مواد کی سیدھ (Align content): یہ ملٹی لائن کنٹینر میں لائنوں کے درمیان فاصلے کو کنٹرول کرتا ہے۔ اس کے اختیارات میں شروع، آخر، مرکز، کھینچیں (Stretch)، درمیان میں فاصلہ (Space between)، ارد گرد فاصلہ (Space around)، اور برابر فاصلہ (Space evenly) شامل ہیں۔
- فاصلہ (Gap): یہ ایک عددی قیمت ہوتی ہے جو آئٹمز اور لائنوں کے درمیان براہ راست فاصلہ (space) متعین کرتی ہے۔
فلیکس آئٹمز کی انفرادی خصوصیات
کنٹینر کے اندر موجود ہر آئٹم کو انفرادی طور پر بھی کنٹرول کیا جا سکتا ہے۔ جب آپ "آئٹم شامل کریں" پر کلک کرتے ہیں تو ایک نیا آئٹم (مثال کے طور پر "Item 5") شامل ہو جاتا ہے۔ ہر آئٹم کے لیے درج ذیل خصوصیات کو تبدیل کیا جا سکتا ہے:
- ترتیب (Order): ایک عددی قیمت جو HTML کوڈ کو چھیڑے بغیر اسکرین پر آئٹم کی ظاہری ترتیب کو تبدیل کرتی ہے۔
- پھیلاؤ (Grow): ایک عددی قیمت جو یہ طے کرتی ہے کہ فالتو جگہ دستیاب ہونے پر آئٹم کتنا پھیلے گا۔
- سکڑاؤ (Shrink): ایک عددی قیمت جو یہ بتاتی ہے کہ جگہ تنگ ہونے پر آئٹم کتنا سکڑے گا۔
- بیسس (Basis): آئٹم کا ابتدائی سائز جو عددی قیمت یا "Auto" ہو سکتا ہے۔
- اپنی سیدھ (Align self): یہ کسی ایک مخصوص آئٹم کو کنٹینر کی طے شدہ الائنمنٹ سے ہٹ کر اپنی انفرادی سیدھ سیٹ کرنے کی اجازت دیتا ہے۔ اس کے اختیارات میں آٹو، شروع، آخر، مرکز، کھینچیں (Stretch)، اور بیس لائن شامل ہیں۔
محور اور ریپنگ کے قوانین
فلیکس باکس کے کام کرنے کا طریقہ کار دو اہم اصولوں پر مبنی ہے:
مرکزی اور کراس محور کا باہمی تعلق
جب آپ سمت (Direction) کو رو (Row) سے کالم (Column) میں تبدیل کرتے ہیں، تو مرکزی محور (main axis) اور کراس محور (cross axis) آپس میں بدل جاتے ہیں۔ اس تبدیلی کے نتیجے میں justify-content اور align-items کے کام کرنے کا انداز بھی بدل جاتا ہے۔ رو کی صورت میں justify-content بائیں سے دائیں کام کرتا ہے، لیکن کالم کی صورت میں یہ اوپر سے نیچے کی طرف کام کرنے لگتا ہے۔
ریپنگ اور لائنوں کی سیدھ
جب ریپنگ آف (کوئی ریپ نہیں) ہوتی ہے، تو تمام آئٹمز کو ہر حال میں ایک ہی لائن پر رہنے کے لیے مجبور کیا جاتا ہے، جس سے وہ تنگ ہو سکتے ہیں۔ لیکن جب ریپنگ آن (ریپ) ہوتی ہے، تو جو آئٹمز کنٹینر کی چوڑائی میں فٹ نہیں آتے، وہ خود بخود اگلی لائن پر منتقل ہو جاتے ہیں۔ اس ملٹی لائن حالت میں align-content فعال ہوتا ہے اور ان لائنوں کو بطور گروپ فاصلہ دیتا ہے۔ فاصلہ (Gap) مارجن استعمال کیے بغیر ان آئٹمز اور لائنوں کے درمیان یکساں دوری برقرار رکھتا ہے۔
کوڈ جنریشن اور پرائیویسی کا عمل
یہ ٹول آپ کے ڈیزائن کردہ لے آؤٹ کا لائیو بصری پیش نظارہ (live preview) دکھاتا ہے۔ جیسے ہی آپ بصری کنٹرولز کو تبدیل کرتے ہیں، پس منظر میں سی ایس ایس کوڈ خود بخود تیار ہوتا ہے۔
اس عمل میں پرائیویسی کا خاص خیال رکھا گیا ہے: آپ کا لے آؤٹ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
جب آپ کا لے آؤٹ تیار ہو جائے تو آپ "CSS کاپی کریں" پر کلک کر کے کوڈ کاپی کر سکتے ہیں، جس کے بعد بٹن کی حالت تبدیل ہو کر "Copied" ہو جاتی ہے۔ سی ایس ایس جنریشن کا ایک اہم قاعدہ یہ ہے کہ صرف ان آئٹمز کے لیے الگ سی ایس ایس رولز تیار کیے جاتے ہیں جن کی خصوصیات میں آپ نے کوئی تبدیلی کی ہو۔
عام سوالات (FAQ)
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 مارجن کے بغیر آئٹمز اور لائنوں کے درمیان فاصلہ سیٹ کرتا ہے۔
کیا میرا لے آؤٹ ڈیٹا محفوظ یا اپ لوڈ ہوتا ہے؟
نہیں، آپ کا لے آؤٹ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی، جس سے آپ کا کام مکمل طور پر مقامی سطح پر محفوظ رہتا ہے۔