flex-start, flex-end, center, baseline, এবং stretch এর ব্যবহার

Flexbox-এর মাধ্যমে আমরা উপাদানগুলোর অবস্থান এবং বিন্যাস নিয়ন্ত্রণ করতে justify-content এবং align-items প্রপার্টি ব্যবহার করতে পারি। এই প্রপার্টিগুলোর মধ্যে flex-start, flex-end, center, baseline, এবং stretch মানগুলো খুবই গুরুত্বপূর্ণ, যেগুলো উপাদানগুলোর বিন্যাস, স্থান এবং সেন্ট্রালাইজেশন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

1. flex-start

• ব্যবহার:
  flex-start মানটি উপাদানগুলোকে তাদের কন্টেইনারের শুরুর দিকে (বাম অথবা উপরের দিক) স্থান দেয়। এটি ডিফল্ট মান, অর্থাৎ যখন কোন মান নির্দিষ্ট করা না হয়, তখন Flexbox এই মানটিকে স্বয়ংক্রিয়ভাবে প্রয়োগ করে।
• কীভাবে কাজ করে:
  • justify-content: flex-start;: উপাদানগুলো অনুভূমিকভাবে (row) বা উল্লম্বভাবে (column) কন্টেইনারের শুরুতে অবস্থান নেবে।
  • align-items: flex-start;: উপাদানগুলো কন্টেইনারের উপরের দিকে (যদি column ডিরেকশন হয়) বা বাম (যদি row ডিরেকশন হয়) অবস্থান নেবে।

উদাহরণ:

.flex-container {
  display: flex;
  justify-content: flex-start; /* অনুভূমিকভাবে বাম থেকে ডানে */
  align-items: flex-start; /* উল্লম্বভাবে উপরে */
}

2. flex-end

• ব্যবহার:
  flex-end মানটি উপাদানগুলোকে কন্টেইনারের শেষের দিকে (ডান অথবা নিচের দিকে) স্থান দেয়।
• কীভাবে কাজ করে:
  • justify-content: flex-end;: উপাদানগুলো অনুভূমিকভাবে (row) বা উল্লম্বভাবে (column) কন্টেইনারের শেষের দিকে স্থান পাবে।
  • align-items: flex-end;: উপাদানগুলো কন্টেইনারের নিচের দিকে (যদি column ডিরেকশন হয়) বা ডান (যদি row ডিরেকশন হয়) অবস্থান নেবে।

উদাহরণ:

.flex-container {
  display: flex;
  justify-content: flex-end; /* অনুভূমিকভাবে ডান দিকে */
  align-items: flex-end; /* উল্লম্বভাবে নিচে */
}

3. center

• ব্যবহার:
  center মানটি উপাদানগুলোকে কন্টেইনারের কেন্দ্রস্থলে অনুভূমিক ও উল্লম্বভাবে সমানভাবে সেন্ট্রালাইজ করে।
• কীভাবে কাজ করে:
  • justify-content: center;: উপাদানগুলো অনুভূমিকভাবে কন্টেইনারের কেন্দ্রে অবস্থান নেবে।
  • align-items: center;: উপাদানগুলো উল্লম্বভাবে কন্টেইনারের কেন্দ্রে অবস্থান নেবে।

উদাহরণ:

.flex-container {
  display: flex;
  justify-content: center; /* অনুভূমিকভাবে কেন্দ্রে */
  align-items: center; /* উল্লম্বভাবে কেন্দ্রে */
}

4. baseline

• ব্যবহার:
  baseline মানটি Flex Items-এর বেসলাইন অনুযায়ী বিন্যস্ত হয়, যা মূলত তাদের টেক্সটের মূল লাইনের উপর ভিত্তি করে। এই মানটি সাধারণত টেক্সট এবং লোগো ইত্যাদির সঠিক অবস্থান নির্ধারণের জন্য ব্যবহৃত হয়।
• কীভাবে কাজ করে:
  • align-items: baseline;: Flex Items-এর টেক্সটের বেসলাইন অনুসারে উল্লম্বভাবে তাদের অবস্থান নির্ধারণ করা হবে।

উদাহরণ:

.flex-container {
  display: flex;
  align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী উল্লম্বভাবে বিন্যস্ত */
}

5. stretch

• ব্যবহার:
  stretch মানটি Flex Items-এর উচ্চতা বা প্রস্থকে কন্টেইনারের উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত করে। এটি Flexbox-এর ডিফল্ট মান, এবং এটি শুধুমাত্র তখন কাজ করে যখন align-items বা align-self প্রপার্টি ব্যবহার করা হয়।
• কীভাবে কাজ করে:
  • justify-content: stretch;: সাধারণত justify-content-এর জন্য stretch মান ব্যবহার হয় না, কারণ এটি শুধুমাত্র কন্টেইনারের সমতল বিন্যাসে প্রভাব ফেলে না।
  • align-items: stretch;: Flex Items-এর উচ্চতা কন্টেইনারের উচ্চতার সাথে সমান হয়ে যাবে। এটি ডিফল্ট আচরণ, অর্থাৎ যদি align-items নির্দিষ্ট না করা হয়, তাহলে Flex Items-এর উচ্চতা কন্টেইনারের উচ্চতার সাথে প্রসারিত হবে।

উদাহরণ:

.flex-container {
  display: flex;
  align-items: stretch; /* Flex Items গুলি কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হবে */
}

সারাংশ

• flex-start: উপাদানগুলোকে কন্টেইনারের শুরুর দিকে স্থান দেয়।
• flex-end: উপাদানগুলোকে কন্টেইনারের শেষের দিকে স্থান দেয়।
• center: উপাদানগুলোকে কন্টেইনারের কেন্দ্রে সেন্ট্রালাইজ করে।
• baseline: উপাদানগুলোকে টেক্সটের বেসলাইন অনুসারে বিন্যস্ত করে।
• stretch: উপাদানগুলোকে কন্টেইনারের উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত করে।

এই মানগুলো Flexbox লেআউট ব্যবস্থাপনাকে আরও নমনীয় এবং কাস্টমাইজেবল করে তোলে, যেখানে আপনি উপাদানগুলোর অবস্থান এবং বিন্যাস খুব সহজেই নিয়ন্ত্রণ করতে পারেন।