order প্রপার্টি কী?
order হলো Flexbox-এর একটি প্রপার্টি যা Flex Items-এর প্রদর্শনের ক্রম নির্ধারণ করে। এটি Flex Items-এর যেকোনো আইটেমের অবস্থান নিয়ন্ত্রণ করতে ব্যবহার করা হয়, যার ফলে আপনি আইটেমগুলোর দৃশ্যমান ক্রম পরিবর্তন করতে পারেন, কিন্তু তাদের HTML স্ট্রাকচার পরিবর্তন না করেই।
এটি মূলত Flex Items-এর ক্রম পরিবর্তন করতে ব্যবহৃত হয় এবং এই প্রপার্টির মাধ্যমে আপনি আইটেমগুলোর শো-অর্ডার কাস্টমাইজ করতে পারেন। order প্রপার্টি গ্রহণ করে সংখ্যাগত মান। ডিফল্টভাবে সব Flex Items-এর order মান 0 থাকে, কিন্তু আপনি যেকোনো পজিটিভ (positive) বা নেগেটিভ (negative) মান ব্যবহার করে তাদের ক্রম পরিবর্তন করতে পারেন।
order প্রপার্টি কীভাবে কাজ করে?
- ডিফল্ট মান: Flexbox কন্টেইনারে সব আইটেমের
orderপ্রপার্টির মান 0 থাকে। এর মানে হলো, আইটেমগুলো তাদের HTML-এ থাকা ক্রম অনুযায়ী প্রদর্শিত হবে। - পজিটিভ ভ্যালু:
orderপ্রপার্টির মান যত বড় হবে, Flex Items তত পরে প্রদর্শিত হবে। - নেগেটিভ ভ্যালু:
orderপ্রপার্টির মান যদি নেগেটিভ হয়, তবে সেই আইটেমটি বাকী আইটেমগুলোর আগে প্রদর্শিত হবে।
Positive Value দিয়ে অর্ডার নির্ধারণ
উদাহরণ 1: Positive Value দিয়ে অর্ডার পরিবর্তন করা
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>
.flex-container {
display: flex;
}
.flex-item {
background-color: teal;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
}
/* Positive values */
.flex-item:nth-child(1) {
order: 2; /* Item 1 এখন দ্বিতীয় স্থানে থাকবে */
}
.flex-item:nth-child(2) {
order: 1; /* Item 2 এখন প্রথম স্থানে থাকবে */
}
.flex-item:nth-child(3) {
order: 4; /* Item 3 এখন চতুর্থ স্থানে থাকবে */
}
.flex-item:nth-child(4) {
order: 3; /* Item 4 এখন তৃতীয় স্থানে থাকবে */
}
আউটপুট:
এই উদাহরণে, Flex Items-এর order মান পরিবর্তন করা হয়েছে যাতে আইটেমগুলোর ক্রম পরিবর্তিত হয়।
- Item 2 প্রথমে,
- Item 1 দ্বিতীয় স্থানে,
- Item 4 তৃতীয় স্থানে,
- Item 3 চতুর্থ স্থানে।
Negative Value দিয়ে অর্ডার নির্ধারণ
উদাহরণ 2: Negative Value দিয়ে অর্ডার পরিবর্তন করা
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>
.flex-container {
display: flex;
}
.flex-item {
background-color: teal;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
}
/* Negative values */
.flex-item:nth-child(1) {
order: -1; /* Item 1 এখন প্রথমে থাকবে */
}
.flex-item:nth-child(2) {
order: 0; /* Item 2 ডিফল্ট অবস্থানে থাকবে */
}
.flex-item:nth-child(3) {
order: 1; /* Item 3 দ্বিতীয় স্থানে থাকবে */
}
.flex-item:nth-child(4) {
order: 2; /* Item 4 তৃতীয় স্থানে থাকবে */
}
আউটপুট:
এখানে order: -1; ব্যবহার করা হয়েছে যা Item 1 কে প্রথম স্থানে নিয়ে আসবে। বাকী আইটেমগুলোর order মান পজিটিভ রাখলে তারা তাদের সঠিক ক্রমে প্রদর্শিত হবে, যেখানে Item 1 প্রথমে, Item 2 ডিফল্ট ক্রমে, Item 3 দ্বিতীয় স্থানে এবং Item 4 তৃতীয় স্থানে থাকবে।
order প্রপার্টি কেন প্রয়োজন?
- HTML স্ট্রাকচার না বদলে ক্রম পরিবর্তন:
orderপ্রপার্টি ব্যবহারের মাধ্যমে আপনি Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে পারেন, কিন্তু তাদের HTML স্ট্রাকচার বা অবস্থান পরিবর্তন না করেই। এটি ওয়েব ডিজাইনে অত্যন্ত কার্যকর, বিশেষ করে যখন আপনি এক্সেসিবিলিটি এবং ইউজার ইন্টারফেস উন্নত করতে চান। - নেভিগেশন বার এবং মেনু ডিজাইন: ওয়েব পেজের ন্যাভিগেশন বা মেনুতে আইটেমগুলোর ক্রম সহজে পরিবর্তন করতে
orderব্যবহার করা হয়। এটি রেস্পন্সিভ ডিজাইনে বিশেষ সহায়ক, যেখানে ছোট স্ক্রীনে আইটেমগুলোর ক্রম পরিবর্তন হতে পারে। - ডাইনামিক কন্টেন্ট সাজানো: কন্টেন্টের ক্রম পরিবর্তন করা সহজ করে দেয়। এক্ষেত্রে আপনার কোড বা ডেটা স্ট্রাকচার পরিবর্তন না করেই উপাদানগুলোর প্রদর্শন পরিবর্তন করা যায়।
order প্রপার্টি ব্যবহার করার উপকারিতা
- ডাইনামিক কন্টেন্টের অবস্থান পরিবর্তন: ইউজার ইন্টারফেসের উপাদানগুলোর ক্রম দ্রুত এবং সহজে পরিবর্তন করা যায়।
- রেস্পন্সিভ ডিজাইনে উপকারিতা: ছোট স্ক্রীনে উপাদানগুলোর ক্রম সহজে পরিবর্তন করা সম্ভব হয়।
- কন্টেন্টের সঠিক সজ্জন: ওয়েব পেজের উপাদানগুলোকে সহজেই পছন্দসই স্থানে প্রদর্শন করা যায়, যেমন পেজের শীর্ষে বা নিচে।
সারাংশ
order প্রপার্টি Flexbox-এর একটি শক্তিশালী টুল যা Flex Items-এর প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আপনি পজিটিভ এবং নেগেটিভ মান দিয়ে এই ক্রম পরিবর্তন করতে পারেন, যা HTML স্ট্রাকচার পরিবর্তন না করেই ওয়েব পেজের কন্টেন্টের সঠিক সজ্জন নিশ্চিত করে।
