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