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ë:
400px + 3 * 200px = 1000px
Atëherë hapësira negative e lirë do të jetë e barabartë me:
1000px - 900px = 100px
Le të gjejmë sa do të pritet nga elementi i parë:
100px * (400px / 1000px) = 40px
Kjo do të thotë se gjerësia e tij do të jetë:
400px - 40px = 360px
Le të gjejmë sa do të pritet nga secili prej elementëve të tjerë:
100px * (200px / 1000px) = 20px
Kjo do të thotë se gjerësia e këtyre elementeve do të jetë:
200px - 20px = 180px
Implementoni blloqet e përshkruara dhe kontrolloni me matje, që gjerësia e elementeve do të jetë me të vërtetë e barabartë me atë që kemi llogaritur.
Llogaritni gjerësinë e blloqeve, dhe pastaj kontrolloni llogaritjet me matje:
<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;
}