flex-shrink: সংকোচন কিভাবে কাজ করে

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-এর আকারের সংকোচন নিয়ন্ত্রণ করতে পারেন, যা ওয়েব ডিজাইনে স্পেস ব্যবস্থাপনায় কার্যকরী।