CSS හි flex බ්ලොක් සම්පීඩනය නියාමනය කිරීම

පෙරනිමියෙන්, සියලුම අංගවලින් කැබලි ඉවත් කරනු ලබන්නේ අංගයේ පළලට සමානුපාතිකව ය. කෙසේ නමුත්, සමහර අංගවලින් විශාල හෝ කුඩා කැබලි ඉවත් කරන ආකාරයට සකස් කළ හැකිය. මේ සඳහා විශේෂ ගුණයක් පවතී 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

එක් එක් අංගයෙන් පහත කැබලිය ඉවත් වේ:

400px - 57.14px = 342.86px ~ 343px

අංගයේ පළල වන්නේ:

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;
}