CSS හි භේදකම් පළල සහ ඉලාස්ටික බ්ලොක් සම්පිච්ඡතාව

දැන් අපගේ අංග විවිධ පළල් ඇතැයි සිතමු. මෙම අවස්ථාවෙහිදී, කැඩී යන කොටස මෙම අංගයේ පළලට සමානුපාතික වනු ඇත සහ පහත සූත්රය භාවිතයෙන් ගණනය කරනු ලැබේ: ඍණාත්මක නිදහස් අවකාශය * (අංගයේ පළල / සියලුම අංගවල පළල්වල එකතුව).

අපට අංග 4 ක් ඇතැයි සිතමු. පළමු අංගයේ පළල 400px ට සමාන වේ, ඉතිරි අංගවල පළල - 200px, සහ මව් අංගයේ පළල 900px.

අංගවල සම්පූර්ණ පළල සමාන වේ:

එවිට ඍණාත්මක නිදහස් අවකාශය සමාන වනු ඇත:

පළමු අංගයෙන් කොපමණ කොටසක් කැඩෙනු ඇත්දැයි අපි සොයා ගනිමු:

එනම් එහි පළල සමාන වනු ඇත:

ඉතිරි එක් එක් අංගයෙන් කොපමණ කොටසක් කැඩෙනු ඇත්දැයි සොයා ගනිමු:

එනම් මෙම අංගවල පළල සමාන වනු ඇත:

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

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