flex-grow: অতিরিক্ত স্থান বণ্টন

flex-grow কী?

flex-grow হলো Flexbox-এর একটি প্রপার্টি যা নির্ধারণ করে যে Flex Items গুলো অতিরিক্ত স্থান কতটুকু দখল করবে। যখন Flex Container-এর মধ্যে অতিরিক্ত (অব্যবহৃত) স্থান থাকে, তখন flex-grow এর মাধ্যমে Flex Items গুলো ঐ অতিরিক্ত স্থান নিজেদের মধ্যে সমানভাবে বা নির্দিষ্ট অনুপাতে বণ্টন করতে পারে।

flex-grow এর মান

• flex-grow: 0 (ডিফল্ট):
  যদি flex-grow এর মান 0 হয়, তাহলে Flex Item অতিরিক্ত স্থান নেবে না এবং তা কেবল তার প্রাথমিক আকার অনুযায়ী থাকবে।
• flex-grow: 1 বা এর বেশি:
  যখন flex-grow এর মান 1 বা এর বেশি হয়, তখন Flex Item অতিরিক্ত স্থান দখল করবে। যদি একাধিক Flex Items-এর flex-grow সমান হয়, তাহলে তারা সমান পরিমাণে অতিরিক্ত স্থান গ্রহণ করবে।
• উদাহরণ:
  flex-grow: 2 মানে হচ্ছে ঐ Flex Item অতিরিক্ত স্থানের দ্বিগুণ অংশ নেবে, যদি অন্য আইটেমগুলোর flex-grow 1 হয়।

flex-grow এর ব্যবহার

flex-grow প্রপার্টি প্রয়োগ

.flex-container {
  display: flex;
  justify-content: space-between;
  width: 100%; /* কন্টেইনারের সম্পূর্ণ জায়গা ব্যবহার করবে */
}

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

অতিরিক্ত স্থান বণ্টন উদাহরণ:

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

.flex-item-1 {
  flex-grow: 1; /* অতিরিক্ত স্থান দখল করবে */
  background-color: lightblue;
}

.flex-item-2 {
  flex-grow: 2; /* অতিরিক্ত স্থান দ্বিগুণ দখল করবে */
  background-color: lightcoral;
}

.flex-item-3 {
  flex-grow: 1; /* অতিরিক্ত স্থান সমানভাবে দখল করবে */
  background-color: lightgreen;
}

HTML:

<div class="flex-container">
  <div class="flex-item-1">Item 1</div>
  <div class="flex-item-2">Item 2</div>
  <div class="flex-item-3">Item 3</div>
</div>

flex-grow এর কাজের ধরন

1. সমান পরিমাণে অতিরিক্ত স্থান বণ্টন (যখন flex-grow সমান):
   যদি সমস্ত Flex Items এর flex-grow সমান হয়, তাহলে অতিরিক্ত স্থান সমানভাবে প্রতিটি Flex Item এর মধ্যে বণ্টিত হবে।

   .flex-item {
     flex-grow: 1; /* সব আইটেম সমান পরিমাণে অতিরিক্ত স্থান নেবে */
   }
   

2. বিভিন্ন পরিমাণে অতিরিক্ত স্থান বণ্টন (যখন flex-grow ভিন্ন):
   যদি Flex Items এর flex-grow মান ভিন্ন হয়, তাহলে অতিরিক্ত স্থান অনুপাত অনুযায়ী বণ্টিত হবে।

   উদাহরণ হিসেবে, flex-grow: 1 আইটেমটি অতিরিক্ত স্থানের 1 অংশ নেবে, আর flex-grow: 2 আইটেমটি 2 অংশ নেবে। অর্থাৎ, দ্বিতীয় আইটেমটি প্রথমটির তুলনায় দ্বিগুণ স্থান নিবে।

আউটপুট বিশ্লেষণ

ধরা যাক, Flex Container এর মধ্যে অতিরিক্ত 100px জায়গা রয়েছে, এবং Flex Items-এর flex-grow এর মান নিচের মতো:

• প্রথম Flex Item: flex-grow: 1
• দ্বিতীয় Flex Item: flex-grow: 2
• তৃতীয় Flex Item: flex-grow: 1

এক্ষেত্রে, অতিরিক্ত 100px স্থানটি পরবর্তীভাবে বণ্টিত হবে:

• প্রথম Flex Item: 1 অংশ → অতিরিক্ত 100px এর 1/4 অংশ (25px)
• দ্বিতীয় Flex Item: 2 অংশ → অতিরিক্ত 100px এর 2/4 অংশ (50px)
• তৃতীয় Flex Item: 1 অংশ → অতিরিক্ত 100px এর 1/4 অংশ (25px)

তাহলে, মোট অতিরিক্ত 100px স্থান তিনটি Flex Item-এর মধ্যে তাদের flex-grow অনুযায়ী বণ্টিত হবে।

flex-grow এর সুবিধা

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

সারাংশ

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