CSS-এ ফ্লেক্স ব্লকগুলির সংকোচন নিয়ন্ত্রণ

ডিফল্টরূপে, সমস্ত উপাদান থেকে টুকরোগুলি তাদের প্রস্থের সমানুপাতিকভাবে ছিনিয়ে নেওয়া হয়। যাইহোক, এটি এমনভাবে করা যেতে পারে যে কিছু উপাদান থেকে বড় বা ছোট টুকরো ছিনিয়ে নেওয়া হয়। এটির জন্য একটি বিশেষ বৈশিষ্ট্য রয়েছে flex-shrink।

এই বৈশিষ্ট্যটি একটি নির্দিষ্ট ওজন উপস্থাপন করে, যা ইতিমধ্যে উল্লিখিত সূত্র অনুসারে ছিনিয়ে নেওয়া টুকরো গণনা করার সময় উপাদানের প্রস্থ দ্বারা গুণ করা হবে। উদাহরণস্বরূপ, যদি একটি উপাদানের প্রস্থ 200px হয় এবং এর flex-shrink 3 হয়, তাহলে ওজনযুক্ত (অর্থাৎ, ওজন দ্বারা গুণিত) উপাদানের প্রস্থ হবে:

200px * 3 = 600px

flex-shrink বিবেচনা করে সূত্রটি নিম্নলিখিত ফর্মটি গ্রহণ করবে: নেতিবাচক মুক্ত স্থান * (উপাদানের ওজনযুক্ত প্রস্থ / সমস্ত ওজনযুক্ত প্রস্থের যোগফল)।

চলুন একটি উদাহরণ দেখি। আমাদের কাছে 4টি উপাদান রয়েছে। প্রথম উপাদানের প্রস্থ 400px এবং flex-shrink 2, বাকি উপাদানগুলির প্রস্থ - 200px, এবং তাদের flex-shrink হল 1। পিতার প্রস্থ 900px।

উপাদানগুলির মোট প্রস্থ হল:

400px + 3 * 200px = 1000px

নেতিবাচক মুক্ত স্থান হবে:

1000px - 900px = 100px

উপাদানগুলির মোট ওজনযুক্ত প্রস্থ হল:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

প্রথম উপাদানের ওজনযুক্ত প্রস্থ হল:

400px * 2 = 800px

প্রথম উপাদান থেকে নিম্নলিখিত টুকরোটি ছিনিয়ে নেওয়া হবে:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

উপাদানের প্রস্থ হবে:

400px - 57.14px = 342.86px ~ 343px

বাকি প্রতিটি উপাদানের ওজনযুক্ত প্রস্থ হল:

200px * 1 = 200px

প্রতিটি উপাদান থেকে নিম্নলিখিত টুকরোটি ছিনিয়ে নেওয়া হবে:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

উপাদানের প্রস্থ হবে:

200px - 14.2px = 185.8px ~ 186px

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

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

<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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

<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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}