Flex Direction এর মাধ্যমে Row এবং Column নির্ধারণ করা

Flex Direction কী?

Flexbox-এ flex-direction একটি গুরুত্বপূর্ণ প্রপার্টি যা Flex Items এর বিন্যাসের দিক (layout direction) নির্ধারণ করে। এটি Flex Container-এর মধ্যে থাকা উপাদানগুলোকে অনুভূমিক (row) বা উল্লম্ব (column)ভাবে সাজানোর জন্য ব্যবহৃত হয়।

Flex Direction এর মাধ্যমে আপনি সহজে একে অপরের থেকে আলাদা এবং সঠিকভাবে বিন্যস্ত উপাদানগুলি তৈরি করতে পারেন।

Flex Direction এর মানসমূহ

1. row (ডিফল্ট):

   • অর্থ: Flex Items গুলো অনুভূমিকভাবে (left to right) বাম থেকে ডানে সাজানো হয়।
   • ব্যবহার: এটি Flexbox-এর ডিফল্ট মান, যা সাধারণত টেক্সট বা উপাদানগুলোর জন্য উপযুক্ত।

   .flex-container {
     display: flex;
     flex-direction: row;  /* অনুভূমিকভাবে আইটেমগুলো সাজানো */
   }
   

2. row-reverse:

   • অর্থ: Flex Items গুলো অনুভূমিকভাবে (right to left) ডান থেকে বামে সাজানো হয়।
   • ব্যবহার: এটি যখন আপনি উপাদানগুলোর ক্রম উল্টাতে চান কিন্তু অনুভূমিকভাবে সাজাতে চান।

   .flex-container {
     display: flex;
     flex-direction: row-reverse;  /* ডান থেকে বামে */
   }
   

3. column:

   • অর্থ: Flex Items গুলো উল্লম্বভাবে (top to bottom) উপরে থেকে নিচে সাজানো হয়।
   • ব্যবহার: এটি ওয়েবপেজের সেকশন, ফর্ম, বা টেক্সট ব্লক সাজানোর জন্য উপযুক্ত।

   .flex-container {
     display: flex;
     flex-direction: column;  /* উল্লম্বভাবে উপরে থেকে নিচে */
   }
   

4. column-reverse:

   • অর্থ: Flex Items গুলো উল্লম্বভাবে (bottom to top) নিচ থেকে উপরে সাজানো হয়।
   • ব্যবহার: এটি যখন আপনি উপাদানগুলোর ক্রম উল্টাতে চান কিন্তু উল্লম্বভাবে সাজাতে চান।

   .flex-container {
     display: flex;
     flex-direction: column-reverse;  /* নিচ থেকে উপরে */
   }
   

Row এবং Column নির্ধারণের প্রাথমিক উদাহরণ

Row ব্যবহার (ডিফল্ট)

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

.flex-container {
  display: flex;
  flex-direction: row;  /* অনুভূমিকভাবে আইটেমগুলো সাজানো */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

আউটপুট: Flex Items গুলো এক সারিতে অনুভূমিকভাবে সাজানো থাকবে, এবং তাদের মধ্যে কিছু ফাঁকা জায়গা থাকবে।

Column ব্যবহার

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

.flex-container {
  display: flex;
  flex-direction: column;  /* উল্লম্বভাবে আইটেমগুলো সাজানো */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

আউটপুট: Flex Items গুলো উল্লম্বভাবে উপরে থেকে নিচে সাজানো হবে, এবং তাদের মধ্যে কিছু ফাঁকা জায়গা থাকবে।

Row-reverse ব্যবহার

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

.flex-container {
  display: flex;
  flex-direction: row-reverse;  /* ডান থেকে বামে */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

আউটপুট: Flex Items গুলো এক সারিতে ডান থেকে বামে সাজানো হবে।

Column-reverse ব্যবহার

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

.flex-container {
  display: flex;
  flex-direction: column-reverse;  /* নিচ থেকে উপরে */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

আউটপুট: Flex Items গুলো উল্লম্বভাবে নিচ থেকে উপরে সাজানো হবে।

কেন Flex Direction প্রয়োজন?

1. বিন্যাসের নমনীয়তা:
   Flex Direction ব্যবহার করে আপনি সহজেই উপাদানগুলোর বিন্যাসের দিক নির্ধারণ করতে পারেন, যা আপনাকে ওয়েব ডিজাইনকে আরও নমনীয় ও সঠিকভাবে কাস্টমাইজ করতে সাহায্য করে।
2. রেস্পন্সিভ ডিজাইন:
   Flex Direction এর মাধ্যমে আপনি ছোট স্ক্রীনে উপাদানগুলো উল্লম্বভাবে (column) এবং বড় স্ক্রীনে অনুভূমিকভাবে (row) সাজাতে পারেন, যা রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।
3. উপাদানগুলোর সঠিক বিন্যাস:
   Flex Direction ব্যবহারের মাধ্যমে আপনার ওয়েবপেজের উপাদানগুলোকে খুব সহজেই অনুভূমিক বা উল্লম্বভাবে সাজানো সম্ভব। এতে ওয়েবপেজের ডিজাইন আরও ক্লিয়ার এবং সুশৃঙ্খল হয়।

সারাংশ

flex-direction ফ্লেক্সবক্সের একটি মৌলিক প্রপার্টি, যা Flex Items-এর বিন্যাসের দিক নির্ধারণ করে। এর মাধ্যমে আপনি সহজেই অনুভূমিক (row) বা উল্লম্ব (column) লেআউট তৈরি করতে পারেন। এটি রেস্পন্সিভ ডিজাইনে সহায়ক এবং উপাদানগুলোর বিন্যাসকে আরও নমনীয় করে তোলে।