Flexbox মডেলটি আপনাকে Flex Items-এর প্রদর্শন অর্ডার (display order) কাস্টমাইজ করার জন্য অনেক সুবিধা প্রদান করে। order প্রপার্টির মাধ্যমে আপনি Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে পারেন, যা HTML কোডের মৌলিক ক্রমের বাইরে গিয়ে কাজ করে।
order প্রপার্টি:
order প্রপার্টি Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে ব্যবহৃত হয়। এর মান ডিফল্টভাবে 0 থাকে, কিন্তু আপনি এই মান পরিবর্তন করে আইটেমের প্রদর্শন ক্রম নিয়ন্ত্রণ করতে পারেন।
প্রপার্টির কার্যকারিতা:
order: 0;(ডিফল্ট মান) → আইটেমটি স্বাভাবিক অবস্থানে প্রদর্শিত হয়।order: 1;→ আইটেমটি প্রদর্শন ক্রমে পরের অবস্থানে চলে যাবে।order: -1;→ আইটেমটি প্রদর্শন ক্রমে আগের অবস্থানে চলে যাবে।
order প্রপার্টির মান পরিবর্তন করে আপনি Flex Items-এর ক্রম কাস্টমাইজ করতে পারবেন, তবে এই পরিবর্তন শুধুমাত্র প্রদর্শন অর্ডারে হবে, HTML কোডের অর্ডার অপরিবর্তিত থাকবে।
order প্রপার্টি ব্যবহার উদাহরণ
HTML:
<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>
CSS:
.flex-container {
display: flex;
justify-content: space-between;
background-color: lightgray;
padding: 10px;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
margin: 5px;
text-align: center;
}
/* order প্রপার্টি ব্যবহার */
.flex-item:nth-child(1) {
order: 3; /* প্রথম আইটেমের অবস্থান পরিবর্তন */
}
.flex-item:nth-child(2) {
order: 1; /* দ্বিতীয় আইটেমের অবস্থান পরিবর্তন */
}
.flex-item:nth-child(3) {
order: 2; /* তৃতীয় আইটেমের অবস্থান পরিবর্তন */
}
আউটপুট:
এখানে Flex Items গুলো HTML কোডের নির্দিষ্ট ক্রম অনুসারে নয়, বরং order প্রপার্টি অনুসারে প্রদর্শিত হবে।
Item 2প্রথমে প্রদর্শিত হবে কারণ তারorder: 1;।Item 3দ্বিতীয় অবস্থানে প্রদর্শিত হবে, কারণ তারorder: 2;।Item 1তৃতীয় অবস্থানে প্রদর্শিত হবে, কারণ তারorder: 3;।
এখানে, আইটেমগুলোর ক্রম শুধুমাত্র CSS-এ প্রদর্শন কাস্টমাইজ করা হয়েছে, কিন্তু HTML কোডে তাদের অবস্থান অপরিবর্তিত থাকবে।
order প্রপার্টির অন্যান্য ব্যবহার
order এর নেতিবাচক মান:
order প্রপার্টি নেতিবাচক (negative) মানও গ্রহণ করতে পারে, যার মাধ্যমে আপনি Flex Items কে অন্য আইটেমগুলোর আগে প্রদর্শন করতে পারেন।
.flex-item:nth-child(1) {
order: -1; /* প্রথম আইটেমকে অন্যদের আগে প্রদর্শন */
}
.flex-item:nth-child(2) {
order: 0; /* দ্বিতীয় আইটেমের ক্রম অপরিবর্তিত থাকবে */
}
.flex-item:nth-child(3) {
order: 1; /* তৃতীয় আইটেম পরের অবস্থানে প্রদর্শিত হবে */
}
এইভাবে, Flex Items-এর প্রদর্শন অর্ডার আরো নিয়ন্ত্রণ করা যায় এবং ব্যবহারকারীর ইন্টারফেসে নমনীয়তা আনা যায়।
order প্রপার্টি কেন প্রয়োজন?
- ডিজাইন নমনীয়তা: আপনি Flexbox ব্যবহার করে HTML কোডের ক্রম বদলানোর প্রয়োজন না পড়েই উপাদানগুলোর প্রদর্শন অর্ডার নিয়ন্ত্রণ করতে পারেন। এটি ডিজাইনকে আরো নমনীয় এবং ব্যবহারকারী বান্ধব করে তোলে।
- UI/UX উন্নতি: কখনো কখনো UI উপাদানগুলোর প্রাধান্য অনুযায়ী তাদের অর্ডার পরিবর্তন করা দরকার হয়, যা
orderপ্রপার্টির মাধ্যমে খুব সহজেই করা যায়। - অর্ডার কাস্টমাইজেশন:
orderপ্রপার্টি ব্যবহার করে আপনি ওয়েব ডিজাইনে আইটেমগুলোর অর্ডার কাস্টমাইজ করতে পারেন, যেমন ন্যাভিগেশন আইটেমগুলোর অবস্থান বা কন্টেন্টের সাজানো, যা খুবই গুরুত্বপূর্ণ রেস্পন্সিভ ডিজাইন তৈরির জন্য।
সারাংশ
orderপ্রপার্টি Flexbox-এ Flex Items-এর প্রদর্শন অর্ডার পরিবর্তন করতে ব্যবহৃত হয়।- HTML-এ আইটেমগুলোর অবস্থান অপরিবর্তিত থাকে, তবে CSS-এ প্রদর্শন অর্ডার কাস্টমাইজ করা যায়।
- এই প্রপার্টি ডিজাইন নমনীয়তা এবং ইউজার ইন্টারফেসে উন্নতি সাধন করতে সহায়তা করে।
Flexbox-এ order প্রপার্টি ব্যবহার করে আপনি আইটেমগুলোর ক্রম খুব সহজে পরিবর্তন করতে পারেন, যা ওয়েব ডিজাইনকে আরো দৃষ্টিনন্দন এবং ব্যবহারবান্ধব করে তোলে।
