A flex blokkok összenyomhatósági tényezője CSS-ben

Az előző leckében kiderítettük, hogy amikor a flex elemeknek nincs elég hely, elkezdenek összenyomódni. Azt, hogy a teljes szélesség mennyivel nagyobb a szülő szélességénél, negatív szabad térnek nevezzük.

Technikailag az összenyomódás azt jelenti, hogy minden elem szélességéből lecsípünk egy kis részt úgy, hogy az összes elem beleférjen a szülőjébe.

Végezzünk el néhány számítást. Tegyük fel például, hogy 4 elemünk van, egyenként 200px szélességgel. Tegyük fel továbbá, hogy a szülő szélessége 700px. Így az elemek összesített szélessége:

Ez 100px-rel nagyobb, mint a szülő szélessége. Számítsuk ki, mennyit kell lecsípni minden elemből, hogy azok beleférjenek a szülőjébe:

Vagyis az elemek szélessége a következő lesz:

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