CSS-এ ফ্লেক্স ব্লকগুলির বিভিন্ন প্রস্থ এবং সংকোচনশীলতা

এখন আমাদের উপাদানগুলির বিভিন্ন প্রস্থ রয়েছে বলে ধরে নেওয়া যাক। এই ক্ষেত্রে, বিচ্ছিন্ন টুকরোটি হবে সমানুপাতিক এই উপাদানের প্রস্থ এবং গণনা করা হবে নিম্নলিখিত সূত্র অনুসারে: নেতিবাচক বিনামূল্যে স্থান * (উপাদানের প্রস্থ / সমস্ত উপাদানের প্রস্থের সমষ্টি)।

ধরা যাক আমাদের 4টি উপাদান রয়েছে। ধরা যাক প্রথম উপাদানের প্রস্থ 400px, অন্যান্য উপাদানের প্রস্থ - 200px, এবং পিতার প্রস্থ 900px।

উপাদানের মোট প্রস্থ সমান:

400px + 3 * 200px = 1000px

তাহলে নেতিবাচক বিনামূল্যে স্থান সমান হবে:

1000px - 900px = 100px

আসুন জেনে নেওয়া যাক প্রথম উপাদান থেকে কতটা কাটা যাবে:

100px * (400px / 1000px) = 40px

অর্থাৎ এর প্রস্থ সমান হবে:

400px - 40px = 360px

আসুন অন্যান্য প্রতিটি উপাদান থেকে কতটা কাটা যাবে তা খুঁজে বের করি:

100px * (200px / 1000px) = 20px

অর্থাৎ এই উপাদানগুলির প্রস্থ সমান হবে:

200px - 20px = 180px

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

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

<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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}