A flex elemek kapzsisága CSS-ben
Tegyük fel, hogy van két flex blokkunk,
amelyek sorba rendeződnek. Ezeknek a blokkoknak a szélessége
100px, a szülőjüké pedig 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;
}
Результат:
Amint látható, az elemeink összes szélessége kisebb, mint a szülő szélessége, ezért jobb oldalon szabad teret hagy.
Ha szükséges, ezt a szabad teret
arányosan el lehet osztani az elemeink között.
Ezt a flex-grow tulajdonsággal tehetjük meg,
amelyet a flex elemeknek adunk meg. Ennek a tulajdonságnak
az értéke egy dimenzió nélküli szám.
Nézzük meg gyakorlatban, hogyan működik ez a tulajdonság.
Példa
Jelenleg két flex blokkunk van, szélességük
100px. Az elemek összesített szélessége
200px, a szülő szélessége pedig 300px.
Így 100px szabad tér marad.
Ha az elemeknek nincs megadva a flex-grow,
akkor egyszerűen látni fogjuk ezt a szabad teret.
Ha viszont meg van adva, akkor az elemek valós szélessége
nagyobb lesz a megadottnál - arányosan
elosztják a szabad teret egymás között
és hozzáadják a saját szélességükhöz.
Tegyük fel például, hogy az első elem flex-grow
értéke 1, a másodiké pedig 3. Számoljuk ki,
hogy a szabad teremből mekkora részt kap
minden egyes elem.
Először meg kell határoznunk az összes
flex-grow egység összegét.
Az első elemnél ez 1, a
másodiknál pedig 3. Ez azt jelenti, hogy összesen
4.
Osszuk el most a 100px szabad teret
4-el, és azt kapjuk, hogy 25px jut
egy flex-grow egységre. Így
az első elemhez egy flex-grow egység,
azaz 25px adódik hozzá,
a másodikhoz pedig három egység, azaz
75px.
Az első elem szélessége 125px lesz,
a másodiké pedig 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;
}
Результат:
Példa
Tegyük fel most, hogy a szülő szélessége 400px,
az első elem szélessége 200px, a második elem
szélessége pedig 100px. Így
a szabad tér ismét
100px lesz.
Adjunk meg minden elemnek flex-grow-t,
értéke 1. Összesen 2 lesz,
tehát a 100px szabad teret
el kell osztani 2-vel. Így
50px jut egy
kapzsisági egységre.
Mivel minden elemnek ugyanaz a flex-grow
értéke, ezért minden elemhez ugyanannyi,
50px adódik hozzá. Ez azt jelenti,
hogy az első elem 250px lesz, és
a második 150px lesz:
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;
}
Результат:
Példa
Tegyük fel ismét, hogy a szülő szélessége 400px,
az első elem szélessége 200px, a második elem
szélessége pedig 100px.
Állítsuk most az első elem flex-grow értékét
3-ra, a másodikét
pedig 1-re. Így a kapzsiság
összesen 4 lesz. Ekkor egy kapzsisági egység
100px / 4 = 25px.
Az első elemhez 75px adódik hozzá,
így 275px lesz, a másodikhoz pedig
25px, így az 125px lesz:
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;
}
Результат:
Gyakorlati feladatok
Az alábbi feladatokban egy
kódot láttok flex elemekkel, amelyeknek van
szélessége és flex-grow értéke. A megadott
kód alapján számoljátok ki, milyen méretei lesznek
minden egyes elemnek. Ezután futtassátok a kódot
és ellenőrizzétek a számításaitokat, megmérve a valós
szélességeket.
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;
}