Order Property (আইটেমের অর্ডার পরিবর্তন করা)

Order Property কী?

order প্রপার্টি ফ্লেক্স আইটেমের প্রদর্শনের ক্রম পরিবর্তন করতে ব্যবহৃত হয়। এটি Flex Items-এর সঠিক বিন্যাস পরিবর্তন না করেই তাদের প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে সক্ষম। এই প্রপার্টিটি Flexbox-এর শক্তিশালী বৈশিষ্ট্য হিসেবে কাজ করে, বিশেষত যখন আপনি HTML কন্টেন্টের ক্রম পরিবর্তন না করেই ডিজাইন কাস্টমাইজ করতে চান।

order প্রপার্টি সংখ্যার মাধ্যমে কাজ করে, এবং সংখ্যা ব্যবহার করে আইটেমের প্রদর্শনের অবস্থান পরিবর্তন করা যায়।

• ডিফল্ট মান: প্রতিটি আইটেমের জন্য order: 0; থাকে। মান যত বেশি হবে, আইটেম তত পরে প্রদর্শিত হবে।

Order Property-এর ব্যবহার:

সিনট্যাক্স:

flex-item {
  order: <number>;
}

• এখানে <number> হলো একটি পূর্ণসংখ্যা, যা Flex Item-এর প্রদর্শনের ক্রম নির্ধারণ করে।
• ডিফল্ট মান: order: 0;।

উদাহরণ:

ধরা যাক, একটি কন্টেইনারে তিনটি Flex Item রয়েছে, এবং আমরা চাই যে আইটেমগুলোর প্রদর্শনের ক্রম পরিবর্তন করতে, কিন্তু তাদের HTML অবকাঠামো পরিবর্তন না করেই।

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;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

/* আইটেমের অর্ডার পরিবর্তন করা */
.flex-item:nth-child(1) {
  order: 2;  /* প্রথম আইটেম দ্বিতীয় স্থানে থাকবে */
}

.flex-item:nth-child(2) {
  order: 1;  /* দ্বিতীয় আইটেম প্রথম স্থানে থাকবে */
}

.flex-item:nth-child(3) {
  order: 3;  /* তৃতীয় আইটেম তৃতীয় স্থানে থাকবে */
}

আউটপুট:

1. Item 2 প্রথমে, তারপর Item 1, এবং শেষে Item 3 প্রদর্শিত হবে।
2. HTML কোডে আইটেমগুলোর অবস্থান অপরিবর্তিত থাকবে, কিন্তু order প্রপার্টির মাধ্যমে তাদের প্রদর্শনের ক্রম পরিবর্তিত হবে।

Order Property এর ব্যবহারের উদাহরণ:

নেভিগেশন মেনু:

ধরা যাক, একটি নেভিগেশন মেনুতে কিছু লিঙ্ক রয়েছে, এবং আপনি চান যে একটি নির্দিষ্ট লিঙ্ক সবসময় ন্যাভিগেশনের শেষের দিকে প্রদর্শিত হোক, কিন্তু HTML কোডের অবস্থান পরিবর্তন করতে চান না।

HTML:

<nav class="navbar">
  <a href="#" class="nav-item">Home</a>
  <a href="#" class="nav-item">About</a>
  <a href="#" class="nav-item">Services</a>
  <a href="#" class="nav-item">Contact</a>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  background-color: teal;
  color: white;
  padding: 10px;
  text-decoration: none;
  text-align: center;
}

/* "Contact" আইটেমের অর্ডার পরিবর্তন করা */
.nav-item:nth-child(4) {
  order: 4; /* "Contact" আইটেমকে সর্বশেষে রাখবে */
}

.nav-item:nth-child(1) {
  order: 1; /* "Home" আইটেম প্রথমে থাকবে */
}

.nav-item:nth-child(2) {
  order: 2; /* "About" আইটেম দ্বিতীয় স্থানে থাকবে */
}

.nav-item:nth-child(3) {
  order: 3; /* "Services" আইটেম তৃতীয় স্থানে থাকবে */
}

আউটপুট:

• Contact লিঙ্ক সর্বশেষে থাকবে, কিন্তু HTML কোডে এটি সবসময় চতুর্থ স্থানে থাকবে না।
• Flexbox order প্রপার্টি দ্বারা তার প্রদর্শনের স্থান পরিবর্তিত হয়েছে।

Order Property-এর অন্যান্য ব্যবহারের ক্ষেত্র:

1. মাল্টি-কলাম লেআউট:
   order ব্যবহার করে Flex Items গুলোর মধ্যে বিশেষভাবে স্থান নির্ধারণ করা যায়, যেমন কার্ড লেআউট বা গ্রিড লেআউটে।
2. নেভিগেশন এবং বাটন গ্রুপ:
   order প্রপার্টি ব্যবহার করে আপনি বিভিন্ন নেভিগেশন লিঙ্ক বা বাটন গ্রুপের ক্রম দ্রুত এবং সহজে পরিবর্তন করতে পারেন।
3. রেস্পন্সিভ ডিজাইন:
   মোবাইল ও ডেস্কটপের জন্য আলাদা আলাদা order সেট করে, আপনার ওয়েবসাইটে উপাদানগুলোর প্রদর্শন সহজেই পরিবর্তন করা যায়।

সারাংশ

order প্রপার্টি Flexbox লেআউটে Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে ব্যবহৃত হয়। এটি HTML কোডের স্থান পরিবর্তন না করেই উপাদানগুলোর প্রদর্শন শৃঙ্খলা নিয়ন্ত্রণ করতে সাহায্য করে। Flexbox-এর এই শক্তিশালী বৈশিষ্ট্যটি লেআউট ডিজাইন এবং ইউজার ইন্টারফেস কাস্টমাইজেশনে গুরুত্বপূর্ণ ভূমিকা পালন করে।

order প্রপার্টি কী?

order প্রপার্টি Flexbox-এ ব্যবহৃত একটি গুরুত্বপূর্ণ প্রপার্টি যা Flex Items-এর প্রদর্শনের ক্রম নিয়ন্ত্রণ করে। এটি ব্যবহার করে আপনি Flex Items-এর সঠিক প্রদর্শন ক্রম পরিবর্তন করতে পারেন, এমনকি তাদের HTML-এ যে ক্রম দেওয়া থাকে, সেটি পরিবর্তন করা ছাড়াই।

order প্রপার্টির ব্যবহার

• ডিফল্ট মান:
  Flexbox-এ order প্রপার্টির ডিফল্ট মান হলো 0। যদি আপনি এই মান পরিবর্তন না করেন, তবে Flex Items তাদের HTML কন্টেন্টের ক্রম অনুসারে প্রদর্শিত হবে।
• ক্রমানুসারে পরিবর্তন:
  order প্রপার্টি ব্যবহার করে আপনি Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে পারেন। আপনি যে কোনো Flex Item-এর order মান বাড়িয়ে বা কমিয়ে সেটির অবস্থান নিয়ন্ত্রণ করতে পারেন।

order প্রপার্টি কিভাবে কাজ করে?

• order মান পরিবর্তন করলে Flex Items তাদের প্রদর্শনের অবস্থান পরিবর্তন করে। যাদের 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;
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

.flex-item:nth-child(1) {
  order: 3; /* প্রথম আইটেমের order মান ৩, এটি পরে আসবে */
}

.flex-item:nth-child(2) {
  order: 1; /* দ্বিতীয় আইটেমের order মান ১, এটি প্রথমে আসবে */
}

.flex-item:nth-child(3) {
  order: 2; /* তৃতীয় আইটেমের order মান ২, এটি দ্বিতীয় আসবে */
}

আউটপুট:

• Flex Items-এর প্রদর্শন ক্রম HTML এর ক্রম অনুসারে হবে না।
• Item 2 প্রথমে, Item 3 দ্বিতীয় এবং Item 1 তৃতীয় স্থানে প্রদর্শিত হবে।

order প্রপার্টির ব্যবহার কেন প্রয়োজন?

1. বিন্যাসের নিয়ন্ত্রণ: order প্রপার্টি Flex Items-এর বিন্যাস এবং প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে সাহায্য করে, যা ওয়েব ডিজাইনকে আরও নমনীয় এবং ইন্টারেক্টিভ করে তোলে।
2. নির্দিষ্ট উপাদানকে আগে বা পরে দেখানো: যখন Flex Items-এর মধ্যে কোনো নির্দিষ্ট উপাদানকে আগে বা পরে প্রদর্শন করতে হয়, তখন order প্রপার্টি ব্যবহৃত হয়। উদাহরণস্বরূপ, মোবাইল লেআউটে গুরুত্বপূর্ণ উপাদানগুলো প্রথমে দেখানোর জন্য এটি খুবই কার্যকর।
3. রেস্পন্সিভ ডিজাইন: রেস্পন্সিভ ডিজাইনে উপাদানগুলোর প্রদর্শনের ক্রম পরিবর্তন করতে order প্রপার্টি খুবই সহায়ক। এর মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজে উপাদানগুলোর অবস্থান দ্রুত এবং সহজে পরিবর্তন করতে পারেন।
4. HTML কাঠামো অপরিবর্তিত রেখে লেআউট নিয়ন্ত্রণ:
   order ব্যবহার করার মাধ্যমে আপনি HTML কন্টেন্টের ক্রম পরিবর্তন না করেও UI লেআউটের উপাদানগুলোর প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে পারেন।

order প্রপার্টি ও অন্যান্য Flexbox প্রপার্টি

• order প্রপার্টি শুধুমাত্র Flex Items-এর প্রদর্শন ক্রম নির্ধারণ করে, কিন্তু এটি তাদের প্রকৃত HTML ক্রম পরিবর্তন করে না।
• flex-direction এবং justify-content প্রপার্টির সাথে মিলিয়ে order ব্যবহার করলে আরও কার্যকরী এবং নমনীয় লেআউট ডিজাইন করা সম্ভব।

সারাংশ

order প্রপার্টি Flexbox লেআউটের মধ্যে Flex Items-এর প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি Flex Items-এর সঠিক অবস্থান পরিবর্তন করতে সহায়ক, এবং এতে HTML-এ উপাদানের আসল ক্রম অপরিবর্তিত থাকে। order প্রপার্টির মাধ্যমে আপনি ওয়েব ডিজাইনকে আরও নমনীয়, ইন্টারঅ্যাকটিভ এবং রেস্পন্সিভ করতে পারেন।

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 প্রপার্টি অনুসারে প্রদর্শিত হবে।

1. Item 2 প্রথমে প্রদর্শিত হবে কারণ তার order: 1;।
2. Item 3 দ্বিতীয় অবস্থানে প্রদর্শিত হবে, কারণ তার order: 2;।
3. 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 প্রপার্টি কেন প্রয়োজন?

1. ডিজাইন নমনীয়তা: আপনি Flexbox ব্যবহার করে HTML কোডের ক্রম বদলানোর প্রয়োজন না পড়েই উপাদানগুলোর প্রদর্শন অর্ডার নিয়ন্ত্রণ করতে পারেন। এটি ডিজাইনকে আরো নমনীয় এবং ব্যবহারকারী বান্ধব করে তোলে।
2. UI/UX উন্নতি: কখনো কখনো UI উপাদানগুলোর প্রাধান্য অনুযায়ী তাদের অর্ডার পরিবর্তন করা দরকার হয়, যা order প্রপার্টির মাধ্যমে খুব সহজেই করা যায়।
3. অর্ডার কাস্টমাইজেশন: order প্রপার্টি ব্যবহার করে আপনি ওয়েব ডিজাইনে আইটেমগুলোর অর্ডার কাস্টমাইজ করতে পারেন, যেমন ন্যাভিগেশন আইটেমগুলোর অবস্থান বা কন্টেন্টের সাজানো, যা খুবই গুরুত্বপূর্ণ রেস্পন্সিভ ডিজাইন তৈরির জন্য।

সারাংশ

• order প্রপার্টি Flexbox-এ Flex Items-এর প্রদর্শন অর্ডার পরিবর্তন করতে ব্যবহৃত হয়।
• HTML-এ আইটেমগুলোর অবস্থান অপরিবর্তিত থাকে, তবে CSS-এ প্রদর্শন অর্ডার কাস্টমাইজ করা যায়।
• এই প্রপার্টি ডিজাইন নমনীয়তা এবং ইউজার ইন্টারফেসে উন্নতি সাধন করতে সহায়তা করে।

Flexbox-এ order প্রপার্টি ব্যবহার করে আপনি আইটেমগুলোর ক্রম খুব সহজে পরিবর্তন করতে পারেন, যা ওয়েব ডিজাইনকে আরো দৃষ্টিনন্দন এবং ব্যবহারবান্ধব করে তোলে।

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 প্রপার্টি কেন প্রয়োজন?

1. HTML স্ট্রাকচার না বদলে ক্রম পরিবর্তন: order প্রপার্টি ব্যবহারের মাধ্যমে আপনি Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করতে পারেন, কিন্তু তাদের HTML স্ট্রাকচার বা অবস্থান পরিবর্তন না করেই। এটি ওয়েব ডিজাইনে অত্যন্ত কার্যকর, বিশেষ করে যখন আপনি এক্সেসিবিলিটি এবং ইউজার ইন্টারফেস উন্নত করতে চান।
2. নেভিগেশন বার এবং মেনু ডিজাইন: ওয়েব পেজের ন্যাভিগেশন বা মেনুতে আইটেমগুলোর ক্রম সহজে পরিবর্তন করতে order ব্যবহার করা হয়। এটি রেস্পন্সিভ ডিজাইনে বিশেষ সহায়ক, যেখানে ছোট স্ক্রীনে আইটেমগুলোর ক্রম পরিবর্তন হতে পারে।
3. ডাইনামিক কন্টেন্ট সাজানো: কন্টেন্টের ক্রম পরিবর্তন করা সহজ করে দেয়। এক্ষেত্রে আপনার কোড বা ডেটা স্ট্রাকচার পরিবর্তন না করেই উপাদানগুলোর প্রদর্শন পরিবর্তন করা যায়।

order প্রপার্টি ব্যবহার করার উপকারিতা

• ডাইনামিক কন্টেন্টের অবস্থান পরিবর্তন: ইউজার ইন্টারফেসের উপাদানগুলোর ক্রম দ্রুত এবং সহজে পরিবর্তন করা যায়।
• রেস্পন্সিভ ডিজাইনে উপকারিতা: ছোট স্ক্রীনে উপাদানগুলোর ক্রম সহজে পরিবর্তন করা সম্ভব হয়।
• কন্টেন্টের সঠিক সজ্জন: ওয়েব পেজের উপাদানগুলোকে সহজেই পছন্দসই স্থানে প্রদর্শন করা যায়, যেমন পেজের শীর্ষে বা নিচে।

সারাংশ

order প্রপার্টি Flexbox-এর একটি শক্তিশালী টুল যা Flex Items-এর প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আপনি পজিটিভ এবং নেগেটিভ মান দিয়ে এই ক্রম পরিবর্তন করতে পারেন, যা HTML স্ট্রাকচার পরিবর্তন না করেই ওয়েব পেজের কন্টেন্টের সঠিক সজ্জন নিশ্চিত করে।