Lakmia e elementeve flex në CSS
Le të supozojmë se tani kemi dy blloqe flex,
të rreshtuar në një rresht. Këtyre blloqeve u është caktuar gjerësi
prej 100px, dhe prindit të tyre - 300px:
html<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
Результат:
Siç e shihni, gjerësia totale e elementeve tona është më e vogël se gjerësia e prindit, kështu që në të djathtë mbetet hapësirë e lirë.
Nëse dëshironi, kjo hapësirë e lirë mund të
ndahet në mënyrë proporcionale midis elementeve tanë.
Kjo bëhet duke përdorur vetinë flex-grow,
e cila u caktohet elementeve flex. Vlera e kësaj
vetie është një numër pa dimension.
Le të shohim në praktikë se si funksionon kjo veti.
Shembull
Tani kemi dy blloqe flex me gjerësi
100px. Gjerësia totale e elementeve
është 200px, dhe gjerësia e prindit - 300px.
Rezulton se mbetet hapësirë e lirë
prej 100px.
Nëse elementeve nuk u është caktuar flex-grow,
atëherë ne thjesht do ta shohim këtë hapësirë të lirë.
Nëse u është caktuar, atëherë gjerësia reale e elementeve
do të jetë më e madhe se ajo e caktuar - ato në mënyrë proporcionale
do ta ndajnë hapësirën e lirë midis tyre
dhe do ta shtojnë atë në gjerësinë e tyre.
Le të supozojmë për shembull se elementi i parë ka flex-grow
të barabartë me 1, dhe i dyti - 3. Le të
llogarisim se cila pjesë e hapësirës së lirë
do të marrë secili element.
Fillimisht duhet të gjejmë sasinë totale
të njësive flex-grow të të gjithë elementeve tanë.
Elementi i parë e ka të barabartë me 1, dhe
i dyti - 3. Kjo do të thotë se në total
është 4.
Le të ndajmë tani 100px hapësirë të lirë
me 4 dhe do të marrim se 25px i përket
një njësie flex-grow. Do të thotë,
që elementit të parë do t'i shtohet një njësi
flex-grow, pra 25px, dhe
të dytit - tre njësi, pra
75px.
Gjerësia e elementit të parë do të jetë 125px,
dhe e të dytit - 175px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
Результат:
Shembull
Le të supozojmë tani që gjerësia e prindit është 400px,
gjerësia e elementit të parë 200px, dhe gjerësia
e elementit të dytë - 100px. Do të thotë,
se hapësira e lirë përsëri
është 100px.
Le t'u caktojmë secilit element flex-grow,
të barabartë me 1. Në total do të jetë 2,
domethënë 100px hapësirë të lirë
duhet të ndahet me 2. Do të thotë se
50px i përgjigjet një
njësie lakmie.
Meqenëse të gjithë elementët kanë të njëjtën vlerë
flex-grow, atëherë të gjithë elementëve do t'u shtohet
e njëjta vlerë prej 50px. Kjo do të thotë,
që elementi i parë do të bëhet 250px, dhe
i dyti do të bëhet 150px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Shembull
Le të supozojmë përsëri që gjerësia e prindit është 400px,
gjerësia e elementit të parë 200px, dhe gjerësia
e elementit të dytë - 100px.
Le t'i caktojmë tani elementit të parë
flex-grow me vlerë 3, dhe të dytit
- me vlerë 1. Do të thotë se lakmia
në total është 4. Atëherë një njësi
lakmie është 100px / 4 = 25px.
Elementit të parë do i shtohet 75px,
dhe ai do të bëhet 275px, kurse të dytit -
25px, ai do të bëhet 125px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Detyra praktike
Në të gjitha detyrat e mëposhtme do t'ju paraqitet
disa kod me elemente flex, të cilët kanë
gjerësi dhe flex-grow. Sipas kodit të paraqitur
llogaritni, çfarë përmasash do të ketë
secili prej elementeve. Pastaj ekzekutoni kodin
dhe kontrolloni llogaritjet tuaja, duke matur gjerësitë
reale të elementeve.
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: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
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: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
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: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>css.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}