CSS-এ ফ্লেক্স ব্লকগুলির সংকোচন ফ্যাক্টর

পূর্ববর্তী পাঠে আমরা জেনেছি যে, যখন ফ্লেক্স এলিমেন্টগুলির জায়গার অভাব হয়, তখন তারা সংকুচিত হতে শুরু করে। যে পরিমাণে মোট প্রস্থ প্যারেন্টের প্রস্থের চেয়ে বেশি তাকে নেতিবাচক মুক্ত স্থান বলা হয়।

টেকনিক্যালি সংকোচনের অর্থ হল যে, প্রতিটি এলিমেন্টের প্রস্থ থেকে এক টুকরো প্রস্থ ছেঁড়ে নেওয়া হয় যাতে সমস্ত এলিমেন্ট তাদের প্যারেন্টের মধ্যে ফিট করতে পারে।

আসুন কিছু হিসাব করি। ধরা যাক, উদাহরণস্বরূপ, আমাদের কাছে 4টি এলিমেন্ট রয়েছে যার প্রস্থ 200px। ধরা যাক এ状态下 প্যারেন্টের প্রস্থ 700px। তাহলে, মোট এলিমেন্টের প্রস্থ সমান:

200px * 4 = 800px

এটি প্যারেন্টের প্রস্থের চেয়ে 100px বেশি। আসুন গণনা করি, প্রতিটি এলিমেন্ট থেকে কতটা ছেঁড়ে নিতে হবে যাতে এলিমেন্টগুলি তাদের প্যারেন্টের মধ্যে ফিট করতে পারে:

100px / 4 = 25px

অর্থাৎ, এলিমেন্টগুলির প্রস্থ হবে:

200px - 25px = 175px

বর্ণিত ব্লকগুলি বাস্তবায়ন করুন এবং পরিমাপ করে পরীক্ষা করুন, যে এলিমেন্টগুলির প্রস্থ সত্যিই আমাদের গণনা করা মানের সমান কিনা।

ব্লকগুলির প্রস্থ গণনা করুন, এবং তারপর পরিমাপ করে গণনা পরীক্ষা করুন:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}