Faktori i Ngjeshshmërisë së Blloqeve Flex në CSS

Në mësimin e mëparshëm zbuluam se, kur elementeve flex u mungon hapësirë, ata fillojnë të ngjeshen. Hapësira negative e lirë referohet me sa gjerësia totale e elementeve është më e madhe se gjerësia e prindit.

Nga ana teknike, ngjeshja nënkupton që një pjesë e gjerësisë i hiqet çdo elementi në mënyrë që të gjithë elementet të përshtaten brenda prindit të tyre.

Le të bëjmë disa llogaritje. Le të themi, për shembull, se kemi 4 elemente me gjerësi 200px. Le të themi se gjerësia e prindit është 700px. Kjo do të thotë se gjerësia totale e elementeve është:

Kjo gjerësi është 100px më e madhe se gjerësia e prindit. Le të llogarisim sa duhet të hiqet nga çdo element në mënyrë që elementet të përshtaten brenda prindit të tyre:

Kjo do të thotë se gjerësia e elementeve do të jetë:

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