align-self এর ভূমিকা এবং ব্যবহার

align-self কী?

align-self একটি Flexbox প্রপার্টি যা Flex Items-এর উল্লম্ব (vertical) অক্ষের বিন্যাস নিয়ন্ত্রণ করে। এটি align-items প্রপার্টি থেকে আলাদা, কারণ align-self Flex Container-এর কোনো নির্দিষ্ট Flex Item-এর অবস্থান নির্ধারণ করে, যেখানে align-items পুরো Flex Container-এর আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ করে।

অর্থাৎ, align-self ব্যবহার করে আপনি একটি নির্দিষ্ট Flex Item-এর উল্লম্ব বিন্যাস পরিবর্তন করতে পারেন, যা Flex Container-এর align-items প্রপার্টি দ্বারা নির্ধারিত সাধারণ আচরণকে ওভাররাইড (override) করে।

align-self এর প্রপার্টি মানসমূহ:

1. auto (ডিফল্ট মান):

   • auto মানটি Flex Item-এর জন্য align-items প্রপার্টি অনুযায়ী আচরণ করে। যদি align-items এ কোনো মান সেট না করা থাকে, তবে auto ডিফল্ট হিসাবে ব্যবহৃত হয়।
   • ব্যবহার: এটি প্রাথমিক অবস্থায় কোনো পরিবর্তন করে না এবং অন্যান্য প্রপার্টির উপর নির্ভর করে।

   .flex-item {
     align-self: auto;
   }
   

2. flex-start:

   • Flex Item কে Flex Container-এর শীর্ষে (উপরের দিকে) সাজায়।
   • ব্যবহার: এটি সাধারণত উপরের অংশে সঠিকভাবে আইটেমগুলো সাজাতে ব্যবহৃত হয়।

   .flex-item {
     align-self: flex-start;
   }
   

3. flex-end:

   • Flex Item কে Flex Container-এর নিচে (নিচের দিকে) সাজায়।
   • ব্যবহার: এটি সাধারণত নিচের অংশে সঠিকভাবে আইটেমগুলো সাজাতে ব্যবহৃত হয়।

   .flex-item {
     align-self: flex-end;
   }
   

4. center:

   • Flex Item কে Flex Container-এর উল্লম্বভাবে কেন্দ্রভূত (center) করে।
   • ব্যবহার: এটি একে অপরের মধ্যে সমান দূরত্বে আইটেমগুলো সাজানোর জন্য ব্যবহৃত হয়।

   .flex-item {
     align-self: center;
   }
   

5. baseline:

   • Flex Item কে Flex Container-এর বেসলাইন অনুযায়ী সাজায়, যা সাধারণত টেক্সট বা লেখার জন্য ব্যবহৃত হয়।
   • ব্যবহার: এটি টেক্সট বা অন্যান্য লেখা উপাদানগুলোর জন্য উপযুক্ত যেখানে আইটেমগুলো তাদের বেসলাইনের উপর সোজা রাখা দরকার।

   .flex-item {
     align-self: baseline;
   }
   

6. stretch:

   • Flex Item এর উচ্চতা Flex Container-এর উচ্চতার সাথে সমান হবে। এটি ডিফল্ট আচরণ হিসেবে কাজ করে যদি অন্য কোনো মান দেওয়া না থাকে।
   • ব্যবহার: এটি সাধারণত আইটেমের উচ্চতাকে Stretch করার জন্য ব্যবহৃত হয়।

   .flex-item {
     align-self: stretch;
   }
   

align-self এর ব্যবহার উদাহরণসহ

উদাহরণ: Align Self এর মাধ্যমে আইটেমের উল্লম্ব বিন্যাস নিয়ন্ত্রণ

<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;
  height: 200px; /* কন্টেইনারের উচ্চতা */
  justify-content: space-between; /* আইটেমগুলোর মধ্যে জায়গা সমানভাবে ভাগ করা */
  background-color: lightgray;
}

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

.flex-item:nth-child(1) {
  align-self: flex-start; /* প্রথম আইটেম শীর্ষে সাজানো হবে */
}

.flex-item:nth-child(2) {
  align-self: center; /* দ্বিতীয় আইটেম কেন্দ্রভূত হবে */
}

.flex-item:nth-child(3) {
  align-self: flex-end; /* তৃতীয় আইটেম নিচে সাজানো হবে */
}

আউটপুট:
এখানে:

• প্রথম আইটেমটি Flex Container-এর শীর্ষে সাজানো হবে।
• দ্বিতীয় আইটেমটি Flex Container-এর উল্লম্বভাবে কেন্দ্রে সজ্জিত হবে।
• তৃতীয় আইটেমটি Flex Container-এর নিচে সাজানো হবে।

align-self এর সুবিধা এবং প্রয়োজনীয়তা

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

সারাংশ

align-self Flexbox-এর একটি অত্যন্ত শক্তিশালী প্রপার্টি যা Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি align-items প্রপার্টির মধ্যে যে কোনো নির্দিষ্ট আইটেমের অবস্থান পরিবর্তন করতে সাহায্য করে। align-self প্রপার্টি ব্যবহার করে আপনি আপনার Flex Items এর বিন্যাসে আরও নমনীয়তা, কাস্টমাইজেশন এবং সঠিক অবস্থান নির্ধারণ করতে পারেন, যা ওয়েব ডিজাইনকে আরও কার্যকর এবং সুশৃঙ্খল করে তোলে।