A flex-grow tulajdonság

A flex-grow tulajdonság határozza meg, hogy egy adott flex blokk mennyivel lehet nagyobb a szomszédos elemeknél, ha az szükséges.

Például, ha egy flex-konténerben minden flex blokk értéke flex-grow:1, akkor azonos méretűek lesznek. Ha az egyik értéke flex-grow:2, akkor 2-szer nagyobb lesz, mint az összes többi.

Ha az elemek összesített szélessége kisebb, mint a szülő szélessége, üres hely marad jobbra. Ha szeretnénk, ezt az üres helyet arányosan eloszthatjuk az elemeink között. Ezt a flex-grow tulajdonsággal tehetjük meg, amelyet a flex-elemekre állítunk be. Ennek a tulajdonságnak az értéke egy dimenzió nélküli szám.

Alkalmazása: egy adott flex blokkra.

Ez a tulajdonság része a rövidített flex tulajdonságnak.

Szintaxis

cssselector {
  flex-grow: pozitív szám;
}

Alapértelmezett érték: 0.

Példa

Most 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 hely marad.

Ha az elemeknek nincs beállítva flex-grow, akkor egyszerűen látni fogjuk ezt a szabad területet. Ha viszont be van állítva, akkor az elemek valódi szélessége nagyobb lesz a megadottnál - arányosan elosztják a szabad területet maguk között és hozzáadják a saját szélességükhöz.

Például legyen az első elem flex-grow értéke 1, a másodiké pedig 3. Számoljuk ki, hogy a szabad hely mekkora részét kapja minden elem.

Először meg kell határoznunk az összes flex-grow egység összegét. Az első elem értéke 1, a másodiké 3. Ez azt jelenti, hogy az összeg 4.

Osszuk el a 100px szabad helyet 4-gyel, így 25px jut egy flex-grow egységre. Így az első elemhez egy egység flex-grow adódik, azaz 25px, 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

Legyen most 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 hely ismét 100px.

Állítsuk be minden elem flex-grow értékét 1-re. Összesen 2 lesz, azaz a 100px szabad helyet el kell osztani 2-vel. Így 50px jut egy kapzsisági egységre.

Mivel minden elem flex-grow értéke azonos, ezért minden elemhez ugyanannyi, 50px adódik. Ez azt jelenti, hogy az első elem 250px lesz, a második pedig 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;
}

Результат:

Példa

Legyen ismét 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 1-re. Így a kapzsiság összesen 4. Ekkor egy egység kapzsiság 100px / 4 = 25px.

Az első elemhez 75px adódik, így 275px lesz, a másodikhoz pedig 25px, így 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;
}

Результат:

Lásd még