Flex Grow এবং Shrink এর ব্যবহার এবং উদাহরণ

Flex Grow এবং Shrink কী?

Flexbox-এর মধ্যে flex-grow এবং flex-shrink প্রপার্টি দুটি Flex Items-এর আকার এবং তাদের সাইজের সাথে সম্পর্কিত। এগুলো Flex Items-এর ভেতরের স্থান ব্যবস্থাপনা এবং তাদের স্ক্রীনের আকার পরিবর্তন হওয়ার সময় তাদের বৃদ্ধি বা সংকোচন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

Flex Grow (ফ্লেক্স গ্রো)

flex-grow Flex Item-এর মধ্যে অতিরিক্ত স্থান কতটুকু দখল করবে তা নির্ধারণ করে। যখন Flex Container-এর মধ্যে অতিরিক্ত জায়গা থাকে, তখন flex-grow-এর মানের উপর ভিত্তি করে Flex Items গুলি ঐ অতিরিক্ত জায়গা দখল করবে।

• ডিফল্ট মান: 0 (এটি মানে Flex Item কোনো অতিরিক্ত জায়গা নেবে না)।
• মান: পজিটিভ সংখ্যা (যত বেশি সংখ্যা, তত বেশি স্থান দখল করবে)।

ব্যবহার:

flex-grow-এর মান ১ বা এর বেশি হলে Flex Item অতিরিক্ত জায়গা দখল করবে। যদি সমস্ত Flex Items-এর flex-grow এক সমান হয়, তাহলে সমস্ত আইটেম সমান জায়গা নিবে।

Flex Shrink (ফ্লেক্স শ্রীঙ্ক)

flex-shrink Flex Item-এর সংকোচন কতটুকু হবে তা নিয়ন্ত্রণ করে। যখন Flex Container-এর মধ্যে জায়গা কমে আসে (যেমন স্ক্রীন ছোট হলে), তখন Flex Items কতটুকু সংকুচিত হবে তা flex-shrink নির্ধারণ করে।

• ডিফল্ট মান: 1 (এটি মানে Flex Item সংকুচিত হবে যদি জায়গা কমে যায়)।
• মান: পজিটিভ সংখ্যা (যত বেশি সংখ্যা, Flex Item তত বেশি সংকুচিত হবে)।

ব্যবহার:

যদি flex-shrink এর মান ০ হয়, তবে Flex Item সংকুচিত হবে না, এবং যদি মান ১ বা তার বেশি হয়, তবে Flex Item জায়গা সংকুচিত করতে সক্ষম হবে।

Flex Grow এবং Shrink এর উদাহরণ

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: 20px;
  margin: 5px;
  text-align: center;
  flex-grow: 1; /* সব আইটেম সমান জায়গা দখল করবে */
  flex-shrink: 1; /* জায়গা সংকুচিত হতে পারবে */
}

ব্যাখ্যা:

• Flex Grow: এখানে flex-grow: 1 ব্যবহার করা হয়েছে, যার মানে হচ্ছে সকল আইটেম সমান জায়গা দখল করবে। অর্থাৎ, কন্টেইনারে অতিরিক্ত জায়গা থাকলে প্রতিটি আইটেম সমানভাবে বাড়বে।
• Flex Shrink: flex-shrink: 1 আইটেমগুলোকে সংকুচিত হতে অনুমতি দেয় যদি কন্টেইনারে জায়গা কম থাকে।

Flex Grow এবং Shrink এর উদাহরণ (ভিন্ন মান)

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 Grow এবং Shrink এর বিভিন্ন মান):

.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: lightgray;
  padding: 10px;
}

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

.flex-item:nth-child(1) {
  flex-grow: 1;
}

.flex-item:nth-child(2) {
  flex-grow: 2; /* দ্বিতীয় আইটেম প্রথমটির দ্বিগুণ জায়গা নিবে */
}

.flex-item:nth-child(3) {
  flex-grow: 0; /* তৃতীয় আইটেম কোনো অতিরিক্ত জায়গা নিবে না */
}

.flex-item {
  flex-shrink: 1; /* সমস্ত আইটেম সংকুচিত হতে পারবে */
}

ব্যাখ্যা:

• Item 1: flex-grow: 1, এটি অতিরিক্ত জায়গার ১ অংশ দখল করবে।
• Item 2: flex-grow: 2, এটি অতিরিক্ত জায়গার ২ অংশ দখল করবে (প্রথমটির দ্বিগুণ)।
• Item 3: flex-grow: 0, এটি কোনো অতিরিক্ত জায়গা দখল করবে না।

Flex Grow এবং Shrink এর ব্যবহার ক্ষেত্রে

• নমনীয় লেআউট ডিজাইন: যখন ওয়েবসাইটের কন্টেন্ট রেস্পন্সিভ হতে হবে, তখন flex-grow এবং flex-shrink ব্যবহার করা হয়, যাতে Flex Items কন্টেইনারের আকারের সাথে সামঞ্জস্যপূর্ণভাবে আকার পরিবর্তন করতে পারে।
• প্রবৃদ্ধি ও সংকোচন: flex-grow ব্যবহৃত হয় যখন অতিরিক্ত জায়গা প্রয়োজন, এবং flex-shrink ব্যবহৃত হয় যখন স্ক্রীন সংকুচিত হয় (যেমন মোবাইল বা ছোট স্ক্রীনে)।

সারাংশ

• Flex Grow: Flex Item-এর অতিরিক্ত জায়গা দখল করার ক্ষমতা নিয়ন্ত্রণ করে।
• Flex Shrink: Flex Item-এর সংকোচন ক্ষমতা নিয়ন্ত্রণ করে যখন জায়গা কম থাকে।
• Flexbox-এর এই প্রপার্টিগুলি ওয়েব ডিজাইনকে আরও নমনীয় এবং রেস্পন্সিভ করে তোলে, যা বিভিন্ন স্ক্রীন সাইজে উপাদানগুলোর আকার এবং বিন্যাস সামঞ্জস্য করতে সাহায্য করে।