یہ مضمون ظاہر کرتا ہے کہ فلیکس باکس کے اندر متن کو عمودی سیدھ میں کیسے لایا جائے:
طریقہ 1: 'الائن آئٹم' پراپرٹی کا استعمال
متن کو عمودی طور پر سیدھ میں کرنے کے لیے، صارف استعمال کر سکتے ہیں ' align-item سی ایس ایس کے ذریعہ فراہم کردہ پراپرٹی۔ یہ عناصر کو فلیکس باکس کے اندر اپنی صف بندی کرنے میں مدد کرتا ہے۔ ممکنہ عمودی سیدھ کی پوزیشنیں ' سب سے اوپر ”، درمیانی '، یا ' نیچے ' طرف.
ان سمتوں میں عناصر کو سیدھ میں لانے کے عملی مظاہرے ذیل میں بیان کیے گئے ہیں:
مثال 1: ٹاپ پوزیشن
اوپری پوزیشن میں فلیکس باکس کے اندر متن کو سیدھ میں کرنے کے لیے، ' flex-start 'قدر' کو فراہم کی جاتی ہے سیدھ میں آنے والی اشیاء ' جائیداد. یہ پراپرٹی مین ڈیو کو تفویض کی گئی ہے جسے فلیکس کے طور پر دکھایا جائے گا۔ آئیے فرض کریں، 'کی کلاس کے ساتھ div عمودی HTML فائل میں بنایا گیا ہے۔ پھر CSS فائل میں، اس کلاس کو منتخب کریں اور درج ذیل خصوصیات کو تفویض کریں:
عمودی {
رنگ : سفید ;
اونچائی : 150px ;
ڈسپلے : فلیکس ;
پیڈنگ-بائیں : 20px ;
سیدھ میں آنے والی اشیاء : flex-start ;
پس منظر کا رنگ : جنگل سبز ;
}
- سب سے پہلے، بنیادی اسٹائل اور سیدھ سی ایس ایس کی رنگ، پس منظر کا رنگ، اور اونچائی کی خصوصیات کا استعمال کرتے ہوئے div کو دیا جاتا ہے۔
- 'ڈسپلے' پراپرٹی کو فلیکس باکس بنانے کے لیے 'فلیکس' پر بھی سیٹ کیا گیا ہے۔
- آخر میں، flexbox کے شروع میں متن کو ظاہر کرنے کے لیے، 'align-items' پراپرٹی کو 'flex-start' پر سیٹ کریں۔
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
آؤٹ پٹ دکھاتا ہے کہ ٹیکسٹ اب فلیکس باکس کے اندر سب سے اوپر کی پوزیشن پر منسلک ہے۔
مثال 2: درمیانی پوزیشن
متن کو درمیانی پوزیشن پر عمودی طور پر سیدھ میں کرنے کے لیے، سیٹ کریں ' مرکز 'سی ایس ایس کی قدر' سیدھ میں آنے والی اشیاء جائیداد:
عمودی {رنگ : سفید ;
اونچائی : 150px ;
ڈسپلے : فلیکس ;
پیڈنگ-بائیں : 20px ;
سیدھ میں آنے والی اشیاء : مرکز ;
پس منظر کا رنگ : جنگل سبز ;
}
مندرجہ بالا کوڈ کے نفاذ کے بعد:
مندرجہ بالا آؤٹ پٹ دکھاتا ہے کہ متن اب فلیکس باکس کے بیچ میں سیدھ میں ہے۔
مثال 3: نیچے کی پوزیشن
متن کو flexbox کے نیچے سیٹ کرنے کے لیے، تفویض کریں ' flex-end 'قدر' سیدھ میں آنے والی اشیاء ' جائیداد. اس بار متن اس پوزیشن پر سیدھ میں ہو جاتا ہے جہاں فلیکس باکس ختم ہو رہا ہے یعنی نیچے کی طرف:
عمودی {رنگ : سفید ;
اونچائی : 150px ;
ڈسپلے : فلیکس ;
پیڈنگ-بائیں : 20px ;
سیدھ میں آنے والی اشیاء : flex-end ;
پس منظر کا رنگ : جنگل سبز ;
}
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا آؤٹ پٹ ظاہر کرتا ہے کہ متن اب نیچے کی پوزیشن میں عمودی طور پر منسلک ہے۔
طریقہ 2: 'جائز مواد' پراپرٹی کا استعمال
' جواز فراہم کرنا ” پراپرٹی کو فلیکس باکس کے اندر متن کو عمودی طور پر سیدھ میں کرنے کے لیے بھی استعمال کیا جا سکتا ہے۔ تاہم، یہ اسی طرح کام کرتا ہے جیسا کہ ' متن سیدھ پراپرٹی اور یہ صف کی سمت میں عناصر کو سیدھ میں کرتا ہے۔ لہذا، سیدھ کی سمت کو تبدیل کرنے کے لئے، ' لچکدار سمت ' جائیداد کو سیٹ کرنے کے لیے استعمال کیا جاتا ہے ' جواز فراہم کرنا 'کی طرف سیدھ' کالم سمت:
عمودی {اونچائی : 150px ;
ڈسپلے : فلیکس ;
پیڈنگ-بائیں : 20px ;
رنگ : سفید ;
پس منظر کا رنگ : گہرا رنگ ;
لچکدار سمت : کالم ;
جواز فراہم کرنا : flex-end ;
}
مندرجہ بالا کوڈ کی وضاحت ذیل میں فراہم کی گئی ہے:
- ' اونچائی '،' رنگ 'اور' پیڈنگ-بائیں 'پراپرٹیز اوپر والے طریقہ کی طرح کام کرتی ہیں۔
- اس کے بعد، سیٹ کریں ' کالم 'قدر' لچکدار سمت کالم کے ذریعے اسٹائل لگانے کے لیے فلیکس باکس کا۔
- اس کے بعد، ' جواز فراہم کرنا پراپرٹی متن کو عمودی طور پر سیدھ میں کرتی ہے۔
- آخر میں، ' flex-end ' ویلیو عنصر کو سیدھ میں لاتی ہے ' نیچے ' طرف.
نوٹ : صارفین بھی سیٹ کر سکتے ہیں ' flex-start 'اور' مرکز 'قدریں' سب سے اوپر '، اور ' درمیانی بالترتیب اطراف۔
مثال کے طور پر، مندرجہ بالا کوڈ پر عمل کرنے کے بعد ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا آؤٹ پٹ دکھاتا ہے کہ ٹیکسٹ فلیکس باکس کے نیچے سیدھ میں ہے۔
نتیجہ
متن کو عمودی طور پر ایک فلیکس باکس کے اندر سیدھ میں لانے کے لیے، ' سیدھ میں آنے والی اشیاء 'اور' جواز فراہم کرنا سی ایس ایس کی خصوصیات کو استعمال کیا جا سکتا ہے۔ یہ دونوں جائیدادیں ملتی ہیں ' flex-start '،' مرکز 'یا' flex-end 'متن کو سیدھ میں لانے کے لیے قدریں' سب سے اوپر '،' درمیانی 'اور' نیچے بالترتیب، فلیکس باکس کے اندر ہدایات۔ اس مضمون نے فلیکس باکس میں متن کی عمودی سیدھ کو ظاہر کیا ہے۔