Gjerësia e ndryshme e elementeve dhe ngjeshshmëria e blloqeve fleks në CSS

Tani le të kenë elementet tona gjerësi të ndryshme. Në këtë rast, pjesa e prerë do të jetë proporcionale me gjerësinë e këtij elementi dhe do të llogaritet sipas formulës së mëposhtme: hapësira negative e lirë * (gjerësia e elementit / shuma e të gjitha gjerësive të elementeve).

Le të kemi 4 elemente. Le të jetë gjerësia e elementit të parë 400px, gjerësia e elementeve të tjerë - 200px, dhe gjerësia e prindit 900px.

Gjerësia totale e elementeve është:

Atëherë hapësira negative e lirë do të jetë e barabartë me:

Le të gjejmë sa do të pritet nga elementi i parë:

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

Le të gjejmë sa do të pritet nga secili prej elementëve të tjerë:

Kjo do të thotë se gjerësia e këtyre 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: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
}
.elem2 {
  width: 100px;
}
.elem3 {
  width: 100px;
}