FlexBox کی ناقابل یقین طاقت

Sep 11, 2025

کيسے

FlexBox، یا لچکدار باکس ترتیب، ایک طاقتور سی ایس ایس لے آؤٹ ماڈیول ہے جو ویب ڈیزائنرز اور ڈویلپرز کو ایک کنٹینر میں عناصر کو سیدھا کرنے اور تقسیم کرنے کے لئے ایک موثر اور آسان طریقہ فراہم کرتا ہے. یہ بہت سے ترتیب کے مسائل کو حل کرتی ہے جو ہم ایک طویل عرصے تک حل کرنے کے لئے جدوجہد کر رہے ہیں.

FlexBox کی بنیادیں

اس کی سب سے بنیادی شکل میں، FlexBox دو عناصر سے بنا ہے: ایک فلیکس کنٹینر (یا فلیکس والدین) اور فلیکس اشیاء (فلیکس بچوں). ایک فلیکس کنٹینر ایک عنصر ہے (جیسے ایک ڈیو ) ڈسپلے کی جائیداد کو دیا Flex. . فلیکس اشیاء ایک فلیکس کنٹینر کے بچے کے عناصر ہیں، جو مختلف ڈسپلے کی خصوصیات کے ذریعے جوڑی جا سکتی ہیں.

فلیکس کنٹینرز اور فلیکس اشیاء ہر ایک کی خصوصیات کی اپنی اپنی رینج ہے جو پیچیدہ ترتیبات کی ایک حد بنانے کے مختلف طریقوں میں مل سکتی ہے. ایک فلیکس کنٹینر کے اندر اندر اشیاء افقی طور پر یا عمودی طور پر رکھی جا سکتی ہیں، مختلف طریقوں سے منسلک اور تقسیم کیا جاسکتا ہے، اور دستیاب جگہ کو فٹ ہونے کے لئے بڑھایا یا چھڑکایا جاتا ہے. یہ تمام اختیارات آپ کو آسانی سے ذمہ دار لے آؤٹ بناتے ہیں.

FlexBox کا استعمال کیسے کریں

FlexBox کا استعمال کرنے کے لئے شروع کرنے کے لئے، آپ کو سب سے پہلے آپ کے فلیکس کنٹینر (والدین عنصر جس میں آپ کے فلیکس اشیاء شامل ہوں) بنانے کی ضرورت ہے. اس مثال میں، ہم استعمال کریں گے ڈیو بلاک ہم عنصر انداز سے پہلے، چلو تین مزید شامل کریں ڈیو فلیکس اشیاء کے طور پر کام کرنے کے لئے ہمارے فلیکس کنٹینر کے اندر بلاکس. اس موقع پر، اشیاء اسٹیک کیے جائیں گے.

ہمارے بچے کے ساتھ جگہ پر تقسیم کیا جاتا ہے، ہم والدین کنٹینر کی ڈسپلے کی جائیداد کو مقرر کرسکتے ہیں Flex. .

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
}

ترتیب ہدایات

ترتیب کی سمت صرف ہدایت ہے کہ آپ کے عناصر خود کو تقسیم کریں گے. ایک فلیکس کنٹینر کی ڈیفالٹ سمت ہے قطار ، جو بچے کے عناصر کو افقی طور پر ظاہر کرے گا. آپ ترتیب کو ترتیب دینے کے ذریعے عمودی طور پر ترتیب کو تبدیل کر سکتے ہیں کالم .

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: صف؛
}

فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: کالم؛
}

آپ کے فلیکس کنٹینر پر آپ نے جو بھی سمت کی سمت اس کی 'اہم' سمت کے طور پر کہا جاتا ہے، جبکہ آپ نے منتخب نہیں کیا کہ دوسری طرف 'کراس' سمت بن جاتا ہے. اس طرح، پہلے سے طے شدہ طور پر، اہم سمت افقی ہو جائے گا اور کراس کی سمت عمودی ہو گی.

FlexBox بھی آپ کو ترتیب کو ریورس کرنے کی اجازت دیتا ہے. جب ردعمل، فلیکس کنٹینر کے بچوں کو دائیں سے بائیں رکھا جائے گا (اگر سمت ہے قطار ) یا نیچے سے اوپر (اگر سمت ہے کالم ).

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: صف ریورس؛
}

فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: کالم ریورس؛
}

اگر آپ چھوٹے اسکرینوں پر ترتیب کو ریورس کرنا چاہتے ہیں تو یہ کام میں آ سکتا ہے.

مثال کے طور پر، ہم ڈیسک ٹاپ اسکرینوں پر کہتے ہیں کہ آپ اسکرین کے بائیں طرف اور دائیں جانب ایک تصویر پر متن ظاہر کرنا چاہتے ہیں (اوپر سرفبورڈ تصویر دیکھیں). موبائل پر، یہ متن کے نیچے تصویر کو منتقل کرے گا. سمت کو تبدیل کر کے، آپ اس بات کا یقین کر سکتے ہیں کہ اس تصویر کے بجائے متن کے اوپر ظاہر ہوتا ہے.

سیدھا ایڈجسٹ کریں

FlexBox کی ترتیبات آپ کو ترتیب دینے کے لئے دو مختلف طریقوں کو بھی دیتا ہے: عمودی اور افقی طور پر. یہاں ایک فلیکس کنٹینر کے اندر اشیاء کے لئے آپ کے افقی سیدھ کے اختیارات ہیں:

فلیکس شروع : قطار کی شروعات کی طرف اشارہ کرتے ہیں (بائیں، جب تک آپ نے ترتیب کو تبدیل نہیں کیا ہے)

مرکز : صفوں کے اندر اندر مرکوز اشیاء

FLEX-END. : قطار کے اختتام کی طرف اشارہ کرتے ہیں (دائیں، جب تک آپ نے ترتیب کو تبدیل نہیں کیا ہے)

خلائی کے درمیان : اشیاء کو قطار کے ساتھ ساتھ تقسیم کیا جاتا ہے

جگہ کے ارد گرد : ہر عنصر کے دونوں حصے پر برابر جگہ کے ساتھ قطار کے ساتھ تقسیم کردہ اشیاء

لہذا کوڈ اس طرح نظر آتا ہے:

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: صف؛
سیدھ مواد: فلیکس شروع | FLEX-END | مرکز | خلائی کے درمیان | جگہ کے ارد گرد | مسلسل؛
}

یہاں ایک فلیکس کنٹینر میں اشیاء کے لئے آپ کے عمودی سیدھ کے اختیارات ہیں:

فلیکس شروع : اشیاء قطار کے سب سے اوپر سے منسلک ہیں

مرکز : اشیاء قطار کے اندر مرکوز ہیں

FLEX-END. : قطار قطار کے نیچے سے منسلک اشیاء

مسلسل : اشیاء قطار کی اونچائی میں بڑھ گئی

بیس لائن : اشیاء ان کے بیس لائنوں سے منسلک ہیں (جو متن متن پر بیٹھتا ہے)

کوڈ اس طرح نظر آسکتا ہے:

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس سمت: صف؛
سیدھ اشیاء: Flex- شروع | FLEX-END | مرکز | بیس لائن | مسلسل؛
}

پہلے سے طے شدہ طور پر، ایک فلیکس کنٹینر کے بچوں کو ہمیشہ ایک ہی لائن پر فٹ ہونے کی کوشش کرے گی. اگر آپ اسے تبدیل کرنا چاہتے ہیں تو، آپ شامل کر سکتے ہیں لپیٹ وصف. یہ بچوں کو ایک نئی لائن پر لپیٹ کرنے کی اجازت دیتا ہے اگر وہ جگہ سے باہر نکلیں.

 فلیکس کنٹینر {
ڈسپلے: فلیکس؛
فلیکس لپیٹ: لپیٹ؛
}

فلیکس اشیا بھی ان کے اپنے فلیکس پر مبنی خصوصیات حاصل کرتے ہیں. جب ایک عنصر ایک فلیکس کنٹینر کے اندر رکھا جاتا ہے تو، یہ خود بخود ایک فلیکس بچے بن جاتا ہے، اور اس کے فلیکس کی بنیاد پر سی ایس ایس شیلیوں کا اپنا سیٹ دیا جاتا ہے. یہ شیلیوں کو کنٹرول کرنا، سیدھ، اور ڈسپلے آرڈر.

Flex Sizing.

فلیکس بچے دستیاب جگہ کو بھرنے کے لئے اپنی چوڑائی یا اونچائی (کنٹینر کی ترتیب سمت پر منحصر ہے) کو تبدیل کرسکتے ہیں.

ویب فلو آپ کو فلیکس Sizing کے لئے تین پیش سیٹ کے اختیارات فراہم کرتا ہے: اگر ضرورت ہو تو ہٹائیں، خالی جگہ بھریں، اور سکڑ نہ کریں. نوٹ کریں کہ ہر بچے کے عنصر اپنی اپنی ترتیبات حاصل کرسکتے ہیں، جو ڈیزائن کے اختیارات کے فروغ کے لئے اجازت دیتا ہے.

 فلیکس شے {
FLEX-SHRENK: & LT؛ نمبر اور GT؛
Flex-grow: & lt؛ نمبر اور GT ؛؛
FLEX-BOSE: & LT؛ لمبائی اور جی ٹی؛ | آٹو؛
}

چلو ان میں سے ہر ایک اختیارات میں سے ہر ایک کو نظر آتے ہیں:

اگر ضرورت ہو تو سکڑیں: اس کی چوڑائی / اونچائی یا اس کے مواد کی بنیاد پر شے کو سائز. اس چیز کو اس سے زیادہ بڑی تعداد میں اضافہ نہیں ہوگا، لیکن بہاؤ کو روکنے کے لئے اپنے کم سے کم سائز میں سکڑ سکتا ہے
خالی جگہ بھریں: شے کو اس کے والدین کے اندر تمام دستیاب جگہ کو بھرنے کے لئے بڑھانے کی اجازت دیتا ہے. اگر آپ اسے ایک فلیکس کنٹینر میں تمام اشیاء پر مقرر کرتے ہیں، تو وہ خالی جگہ کے برابر مقدار میں لے جائیں گے
سکڑ مت کرو اس کی چوڑائی / اونچائی یا اس کے مواد کی بنیاد پر شے کو سائز کا سائز، لیکن اسے سکڑنے کی اجازت نہیں دیتا، یہاں تک کہ اگر اس بہاؤ کا سبب بن جائے گا

فلیکس اشیاء بھی ان کی اپنی سیدھ کی ترتیبات بھی کرسکتے ہیں، جو ان کے والدین فلیکس کنٹینر کی طرف سے مقرر کردہ ڈیفالٹ سیدھ کو ختم کر دیتے ہیں. یہ صفات پہلے بیان کی گئی ہے.

 فلیکس شے {
ڈسپلے: فلیکس؛
فلیکس سمت: صف؛
سیدھ اشیاء: Flex- شروع | FLEX-END | مرکز | بیس لائن | مسلسل؛
}

ڈیفالٹ کی طرف سے، فلیکس اشیا اسی ترتیب میں ڈسپلے کے طور پر وہ ذریعہ کوڈ میں ظاہر ہوتے ہیں. FlexBox کے ساتھ، آپ اس رویے کو ختم کر سکتے ہیں تاکہ اس بات کو یقینی بنائیں کہ عناصر بالکل صحیح ترتیب میں ڈسپلے کریں.

آپ یہاں استعمال کر سکتے ہیں چار اہم اختیارات ہیں:

آٹو : ڈیفالٹ قیمت، جو اشیاء کے طور پر وہ ذریعہ میں ہیں
پہلا : آئٹم اس کے فلیکس کنٹینر میں سب سے پہلے ظاہر ہوتا ہے
آخری : آئٹم اس کے فلیکس کنٹینر میں آخری ظاہر ہوتا ہے
اپنی مرضی کے مطابق : آپ اس آرڈر کو اپنی مرضی کے مطابق کرسکتے ہیں جو آپ کے آئٹم میں دکھایا جائے گا

اپنی مرضی کے مطابق آرڈر ایک نمبر کے طور پر بیان کیا جاسکتا ہے، جس میں اس آرڈر کی وضاحت کرتا ہے جس میں فلیکس کنٹینر کے اندر فلیکس شے ظاہر ہوتا ہے.

 فلیکس شے {
آرڈر: & lt؛ integer & gt ؛؛
}

میں اسے کیوں استعمال کروں؟

مجھے خوشی ہے کہ آپ نے پوچھا! FlexBox کا استعمال کرتے ہوئے آپ کو آسانی سے ذمہ دار ترتیبات تخلیق کرنے کی اجازت دیتا ہے جو ایک بار بہت مشکل (یا ناممکن) تھے جن میں بڑے پیمانے پر سی ایس ایس ترتیب ماڈیولز کے ساتھ تخلیق کرنے کے لئے.

ذیل میں تصویر میں مثال پر نظر ڈالیں - جن میں سے بہت سے آپ نے پہلے ہی ویب میں دیکھا ہے. ان میں سے تقریبا تمام سی ایس ایس کی کافی مقدار (خاص طور پر مختلف سکرین کے سائز میں) لے جائیں گے، لیکن FlexBox کے ساتھ حاصل کرنے کے لئے صرف چند سادہ لائنیں لے جائیں گے. کارروائی میں ان مثالوں کو دیکھنے کے لئے، دورہ flexbox.webflow.com. .

FlexBox کی ناقابل یقین طاقت

FlexBox کی بنیادیں

FlexBox کا استعمال کیسے کریں

ترتیب ہدایات

سیدھا ایڈجسٹ کریں

Flex Sizing.

میں اسے کیوں استعمال کروں؟

کيسے - انتہائی مشہور مضامین

جامسٹیک: آج تیزی سے، زیادہ موثر ویب سائٹس کی تعمیر

Nextjs / رد عمل کے لئے SEO دوستانہ سر اجزاء کی تعمیر

آپ کی ویب سائٹ کے لئے Alexa مہارت کیسے بنائیں

فنکاروں کے لئے تصور ڈیزائن تجاویز

ایک انٹرایکٹو Parallax تصویر بنائیں

تین. js کے ساتھ ایک 3D آبجیکٹ کو پگھلنے کے لئے کس طرح

وین گوگ کی طرح ایک تصویر پینٹ

کارکن کی اناتومی: 15 اوپر تجاویز

اقسام