flex-basis: প্রাথমিক আকার নির্ধারণ

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