Flex Basis, Flex Grow এবং Flex Shrink (ফ্লেক্স আইটেমের আকার নিয়ন্ত্রণ)

Flexbox-এর মাধ্যমে ফ্লেক্স আইটেমগুলোর আকার এবং স্থান নিয়ন্ত্রণ করা অনেক সহজ। ফ্লেক্স আইটেমগুলোর আকার নির্ধারণের জন্য তিনটি গুরুত্বপূর্ণ প্রপার্টি রয়েছে: flex-basis, flex-grow, এবং flex-shrink। এগুলো ফ্লেক্স আইটেমের আকার, প্রসারণ এবং সংকোচন নিয়ন্ত্রণ করে।

1. Flex Basis (ফ্লেক্স বেসিস)

বিবরণ:

flex-basis প্রপার্টি ফ্লেক্স আইটেমের প্রাথমিক আকার নির্ধারণ করে, এটি ফ্লেক্স আইটেমের শুরুতে ব্যবহৃত আকার হিসেবে কাজ করে। যদি flex-grow বা flex-shrink নির্ধারিত না থাকে, তবে flex-basis ফ্লেক্স আইটেমের আকার হিসেবে গণ্য হবে। এটি width বা height এর মতো কাজ করে, তবে Flexbox কনটেইনারে আকারের দিক অনুসারে কাজ করবে।

ব্যবহার:

flex-basis আইটেমের প্রাথমিক আকার নির্ধারণ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি আইটেমের প্রাথমিক আকার ১০০ পিক্সেল করতে:

.flex-item {
  flex-basis: 100px; /* আইটেমের প্রাথমিক আকার ১০০ পিক্সেল */
}

ডিফল্ট মান:

auto (যা আইটেমের প্রাক-নির্ধারিত আকার অনুসারে হবে, যদি না অন্য কিছু নির্ধারণ করা হয়)।

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

বিবরণ:

flex-grow প্রপার্টি ফ্লেক্স আইটেমের আকার প্রসারিত হওয়ার হার নির্ধারণ করে। যখন কনটেইনারে অতিরিক্ত জায়গা থাকে, তখন flex-grow সেই অতিরিক্ত জায়গা দখল করার জন্য ব্যবহৃত হয়। এটি একটি স্কেলিং ফ্যাক্টর, যার মাধ্যমে একাধিক আইটেমের মধ্যে অতিরিক্ত জায়গা কিভাবে ভাগ করা হবে তা নির্ধারণ করা হয়।

ব্যবহার:

যদি flex-grow: 1 হয়, তাহলে ফ্লেক্স আইটেমটি অতিরিক্ত জায়গা দখল করতে পারে, এবং flex-grow: 0 হলে, আইটেমটি অতিরিক্ত জায়গা দখল করবে না (অর্থাৎ, আকার পরিবর্তন হবে না)।

.flex-item {
  flex-grow: 1; /* অতিরিক্ত জায়গা সমানভাবে দখল করবে */
}

ডিফল্ট মান:

0 (অর্থাৎ, আইটেমগুলি অতিরিক্ত জায়গা নেবে না)।

3. Flex Shrink (ফ্লেক্স শ্রীংক)

বিবরণ:

flex-shrink প্রপার্টি ফ্লেক্স আইটেমের সংকুচিত হওয়ার হার নির্ধারণ করে। এটি তখন ব্যবহৃত হয় যখন কনটেইনারে পর্যাপ্ত জায়গা না থাকে, এবং Flexbox আইটেমগুলোকে সংকুচিত করতে হবে। flex-shrink স্কেলিং ফ্যাক্টরের মতো কাজ করে, তবে এটি আইটেমগুলোর আকার ছোট করতে ব্যবহৃত হয়।

ব্যবহার:

যদি flex-shrink: 1 হয়, তাহলে ফ্লেক্স আইটেমটি সংকুচিত হতে পারে, এবং flex-shrink: 0 হলে, আইটেমটি সংকুচিত হবে না।

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

ডিফল্ট মান:

1 (অর্থাৎ, আইটেমগুলি সংকুচিত হবে)।

Flexbox এর মাধ্যমে আকার নিয়ন্ত্রণের উদাহরণ

<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-around;
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  color: white;
  padding: 20px;
  text-align: center;
  /* Flexbox properties for controlling size */
  flex-basis: 100px;  /* Primary size */
  flex-grow: 1;        /* Grow to take extra space */
  flex-shrink: 1;      /* Shrink if there is not enough space */
}

ব্যাখ্যা:

• flex-basis: 100px;: আইটেমগুলোর প্রাথমিক আকার ১০০ পিক্সেল হবে।
• flex-grow: 1;: অতিরিক্ত জায়গা পাওয়া গেলে আইটেমগুলি সমানভাবে বাড়বে।
• flex-shrink: 1;: পর্যাপ্ত জায়গা না থাকলে আইটেমগুলি সংকুচিত হবে।

Flexbox প্রপার্টির কার্যকারিতা

সারাংশ

Flexbox এর flex-basis, flex-grow, এবং flex-shrink প্রপার্টি ফ্লেক্স আইটেমের আকার এবং স্থান নিয়ন্ত্রণ করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। flex-basis আইটেমের প্রাথমিক আকার নির্ধারণ করে, flex-grow অতিরিক্ত জায়গা দখল করার হার নির্ধারণ করে, এবং flex-shrink সংকুচিত হওয়ার হার নিয়ন্ত্রণ করে। এগুলোর সাহায্যে আপনি ফ্লেক্স কনটেইনারে আইটেমগুলোর আকার, বিন্যাস এবং স্থান ব্যবস্থাপনা সহজেই নিয়ন্ত্রণ করতে পারেন।

flex-basis কী?

flex-basis হলো Flexbox-এর একটি গুরুত্বপূর্ণ প্রপার্টি যা Flex Items-এর প্রাথমিক আকার নির্ধারণ করে। এটি নির্ধারণ করে যে, Flex Item-এর আকার কতো হবে যখন Flexbox প্রথমে তার স্থান বরাদ্দ করবে। এটি Flex Item-এর প্রাথমিক আকার সেট করে এবং তারপরে flex-grow এবং flex-shrink প্রপার্টি দ্বারা আকার পরিবর্তন করতে পারে।

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

flex-basis এর মান হিসাবে আপনি একটি দৈর্ঘ্য (যেমন px, em, %, rem ইত্যাদি) নির্ধারণ করতে পারেন অথবা auto ব্যবহার করতে পারেন। যখন flex-basis: auto; ব্যবহার করা হয়, তখন Flex Item-এর প্রাথমিক আকার তার কন্টেন্টের আকারের উপর ভিত্তি করে নির্ধারণ করা হয়।

flex-basis এর মানসমূহ:

1. auto:

   • auto মান ব্যবহার করলে Flex Item-এর প্রাথমিক আকার তার কন্টেন্টের আকারের উপর ভিত্তি করে নির্ধারণ করা হয়।
   • ব্যবহার: যখন আপনি চান Flex Item তার কন্টেন্ট অনুযায়ী প্রাথমিক আকার নিক।

   .flex-item {
     flex-basis: auto; /* কন্টেন্ট অনুযায়ী আকার নির্ধারণ হবে */
   }
   

2. একটি নির্দিষ্ট দৈর্ঘ্য (যেমন px, %, em ইত্যাদি):

   • আপনি flex-basis-এ নির্দিষ্ট দৈর্ঘ্য (যেমন 100px, 50%, 10em) ব্যবহার করে Flex Item-এর প্রাথমিক আকার নির্ধারণ করতে পারেন।
   • ব্যবহার: যখন আপনি Flex Item-এর প্রাথমিক আকার একটি নির্দিষ্ট আকারে স্থির রাখতে চান।

   .flex-item {
     flex-basis: 200px; /* প্রাথমিক আকার 200px */
   }
   

flex-basis এবং Flexbox-এর অন্যান্য প্রপার্টির সম্পর্ক

flex-basis-এর সাথে flex-grow এবং flex-shrink প্রপার্টি ব্যবহার করে Flex Item-এর আকার পরিবর্তন করা যেতে পারে:

• flex-grow: অতিরিক্ত স্থানে Flex Item কতটুকু জায়গা দখল করবে তা নির্ধারণ করে।
• flex-shrink: ছোট পর্দায় Flex Item কতটুকু সংকুচিত হবে তা নির্ধারণ করে।

উদাহরণস্বরূপ:

• যদি flex-basis: 200px; থাকে এবং flex-grow: 1; থাকে, তবে Flex Item প্রাথমিকভাবে 200px হবে, কিন্তু যদি অতিরিক্ত স্থান থাকে, তাহলে এটি বাড়তে থাকবে।
• যদি flex-basis: 200px; এবং flex-shrink: 1; থাকে, তবে ছোট পর্দায় Flex Item 200px থেকে সংকুচিত হতে পারে।

flex-basis এর উদাহরণ

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;
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  flex-basis: 200px; /* প্রতিটি আইটেমের প্রাথমিক আকার 200px */
}

আউটপুট:

Flex Items-এর প্রাথমিক আকার 200px হবে এবং justify-content: space-between; দ্বারা তাদের মধ্যে সমান জায়গা তৈরি হবে।

flex-basis এর সারাংশ

• flex-basis Flexbox-এর প্রাথমিক আকার নির্ধারণ করার জন্য ব্যবহৃত হয়।
• এটি Flex Item-এর আকার প্রথমে স্থির করতে সহায়তা করে, তারপরে flex-grow এবং flex-shrink দ্বারা আকার পরিবর্তিত হতে পারে।
• এটি বিভিন্ন লেআউট ডিজাইন এবং রেস্পন্সিভ ওয়েব পেজ তৈরিতে অত্যন্ত কার্যকরী।

Flexbox ব্যবহার করে আপনার ডিজাইনে উপাদানগুলোর আকার, বিন্যাস এবং স্থান নিয়ন্ত্রণ সহজেই করা সম্ভব। flex-basis প্রপার্টি ফ্লেক্স আইটেমগুলোর প্রাথমিক আকার নির্ধারণে সাহায্য করে, যা লেআউট ডিজাইনকে আরও নমনীয় এবং কার্যকরী করে তোলে।

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 এর মধ্যে অতিরিক্ত জায়গা সমান বা নির্দিষ্ট অনুপাতে বণ্টন করতে সহায়তা করে, যা লেআউট ডিজাইনে নমনীয়তা এবং স্বয়ংক্রিয় আকার সমন্বয়ের সুযোগ প্রদান করে।

flex-shrink কী?

flex-shrink হলো Flexbox-এর একটি প্রপার্টি যা ফ্লেক্স আইটেমের সংকোচন (shrinking) নিয়ন্ত্রণ করে। এটি নির্ধারণ করে যে যদি ফ্লেক্স কন্টেইনারে পর্যাপ্ত জায়গা না থাকে, তবে ফ্লেক্স আইটেমগুলো কিভাবে সংকুচিত (shrink) হবে।

এটি Flex Items-এর আকারকে নিয়ন্ত্রণ করতে ব্যবহৃত হয় যখন Flex Container-এর মধ্যে অতিরিক্ত জায়গা না থাকে, অর্থাৎ কন্টেইনারের প্রস্থ বা উচ্চতা ছোট হয়ে গেলে ফ্লেক্স আইটেমগুলোর আকার কমাতে বা সংকুচিত করতে flex-shrink ব্যবহৃত হয়।

flex-shrink এর মান

flex-shrink প্রপার্টির মান একটি সংখ্যা হতে পারে, যা সংকোচনের মাত্রা নির্ধারণ করে। এর ডিফল্ট মান হলো ১, যা মানে হল যে ফ্লেক্স আইটেমগুলো স্বাভাবিকভাবে সংকুচিত হবে যদি কন্টেইনারে পর্যাপ্ত জায়গা না থাকে। আপনি এই মানটি ০ বা বড় সংখ্যায় পরিবর্তন করে আইটেমগুলোর সংকোচন নিয়ন্ত্রণ করতে পারেন।

মানের ব্যাখ্যা:

• flex-shrink: 0; – ফ্লেক্স আইটেম সংকুচিত হবে না। (ফ্লেক্স আইটেম স্থির থাকবে, সংকোচন হবে না)
• flex-shrink: 1; (ডিফল্ট মান) – ফ্লেক্স আইটেম সংকুচিত হবে, কিন্তু এর আকারে সমানভাবে পরিবর্তন হবে অন্যান্য আইটেমের সাথে।
• flex-shrink: 2; – এই আইটেমটি অন্য আইটেমের তুলনায় দ্বিগুণ পরিমাণে সংকুচিত হবে।

কিভাবে flex-shrink কাজ করে?

যখন Flex Container-এর আকার ছোট হয়ে যায় এবং তার ভেতরে থাকা Flex Items-এর জন্য পর্যাপ্ত জায়গা না থাকে, তখন flex-shrink প্রপার্টি আইটেমগুলোকে সংকুচিত করতে সাহায্য করে।

উদাহরণ:

ধরা যাক, আমাদের একটি Flexbox কন্টেইনারে তিনটি আইটেম আছে, এবং আমরা প্রতিটি আইটেমের জন্য flex-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;
  width: 300px; /* ছোট করে কন্টেইনারের প্রস্থ সীমিত করা */
  background-color: lightgray;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1; /* ফ্লেক্স আইটেমগুলো সমান জায়গা নেবে */
}

.flex-item:nth-child(1) {
  flex-shrink: 1; /* সাধারণ সংকোচন */
}

.flex-item:nth-child(2) {
  flex-shrink: 2; /* দ্বিগুণ সংকোচন */
}

.flex-item:nth-child(3) {
  flex-shrink: 0; /* সংকুচিত হবে না */
}

ব্যাখ্যা:

1. Item 1 এবং Item 2 সংকুচিত হবে, কিন্তু Item 2 অন্যান্য আইটেমের তুলনায় দ্বিগুণ সংকুচিত হবে কারণ এর flex-shrink মান ২।
2. Item 3 কখনও সংকুচিত হবে না, কারণ এর flex-shrink মান ০।

সংকোচনের কাজের প্রক্রিয়া:

1. যখন কন্টেইনারে অতিরিক্ত জায়গা থাকে, Flex Items তাদের প্রাথমিক আকারে থাকবে।
2. কিন্তু যখন কন্টেইনারে জায়গা কমে যায় (যেমন প্রস্থ কমে গেলে), Flex Items সংকুচিত হবে।
3. flex-shrink নির্ধারণ করবে কোন আইটেমটি বেশি সংকুচিত হবে। উদাহরণস্বরূপ, যেটির মান বেশি, সেটি বেশি সংকুচিত হবে।

উদাহরণে flex-shrink এর কার্যকারিতা:

ধরা যাক, Flex Container-এর মোট প্রস্থ 300px, এবং তার মধ্যে তিনটি ফ্লেক্স আইটেম রাখা হয়েছে, প্রতিটি আইটেমের প্রাথমিক আকার 200px। যদি কন্টেইনারের প্রস্থ 300px-এ সীমাবদ্ধ থাকে, তবে 600px (200px * 3) জায়গার প্রয়োজন। তাহলে, flex-shrink এর মাধ্যমে এই আইটেমগুলো সংকুচিত হবে।

• Item 1 (ব্লু আইটেম) flex-shrink: 1; দ্বারা সংকুচিত হবে। এটি 1 ইউনিট সংকুচিত হবে।
• Item 2 (সবুজ আইটেম) flex-shrink: 2; দ্বারা সংকুচিত হবে, এর সংকোচন হবে দ্বিগুণ।
• Item 3 (লাল আইটেম) flex-shrink: 0; দ্বারা সংকুচিত হবে না।

flex-shrink এর উপকারিতা:

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

সারাংশ

flex-shrink প্রপার্টি Flexbox লেআউটের একটি গুরুত্বপূর্ণ অংশ, যা সংকোচনের পরিমাণ নির্ধারণ করে যখন Flex Container-এর মধ্যে পর্যাপ্ত জায়গা থাকে না। এর মাধ্যমে আপনি সহজেই Flex Items-এর আকারের সংকোচন নিয়ন্ত্রণ করতে পারেন, যা ওয়েব ডিজাইনে স্পেস ব্যবস্থাপনায় কার্যকরী।

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-এর এই প্রপার্টিগুলি ওয়েব ডিজাইনকে আরও নমনীয় এবং রেস্পন্সিভ করে তোলে, যা বিভিন্ন স্ক্রীন সাইজে উপাদানগুলোর আকার এবং বিন্যাস সামঞ্জস্য করতে সাহায্য করে।