Flex-grow flex elementov v CSS

Predpokladajme, že máme dva flex bloky usporiadané vedľa seba. Týmto blokom je nastavená šírka na 100px a ich rodičovskému elementu - 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;
}

Результат:

Ako vidíte, celková šírka našich elementov je menšia ako šírka rodiča, preto na pravej strane zostáva voľný priestor.

V prípade potreby je možné tento voľný priestor proporcionálne rozdeliť medzi naše elementy. To sa robí pomocou vlastnosti flex-grow, ktorá sa nastavuje flex elementom. Hodnotou tejto vlastnosti je bezrozmerné číslo.

Pozrime sa v praxi, ako táto vlastnosť funguje.

Príklad

Teraz máme dva flex bloky so šírkou 100px. Ich celková šírka 200px, a šírka rodiča - 300px. To znamená, že zostáva voľný priestor v 100px.

Ak elementom nie je nastavený flex-grow, jednoducho uvidíme tento voľný priestor. Ak je nastavený, tak skutočná šírka elementov bude väčšia ako zadaná - proporcionálne si rozdelia voľný priestor medzi sebou a pridajú ho k svojej šírke.

Napríklad, nech prvý element má flex-grow rovný 1 a druhý - 3. Poďme vypočítať, akú časť voľného priestoru získa každý element.

Najprv je potrebné zistiť celkový počet jendotiek flex-grow všetkých našich elementov. Prvý element má hodnotu 1 a druhý - 3. To znamená, že súčet je 4.

Teraz vydeľme 100px voľného priestoru 4 a dostaneme, že na jednu jednotku flex-grow pripadá 25px. To znamená, že k prvému elementu sa pridá jedna jednotka flex-grow, teda 25px, a k druhému - tri jednotky, teda 75px.

Šírka prvého elementu bude 125px, a druhého - 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;
}

Результат:

Príklad

Nech je teraz šírka rodiča rovná 400px, šírka prvého elementu 200px a šírka druhého elementu - 100px. To znamená, že voľný priestor je opäť rovný 100px.

Nastavme každému elementu flex-grow, rovný 1. Súčet bude 2, to znamená, že 100px voľného priestoru je potrebné rozdeliť na 2. To znamená, že na jednu jednotku flex-grow pripadá 50px.

Pretože všetky elementy majú rovnakú hodnotu flex-grow, ku všetkým elementom sa pridá rovnaká hodnota 50px. To znamená, že prvý element bude mať 250px a druhý bude mať 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;
}

Результат:

Príklad

Nech je opäť šírka rodiča rovná 400px, šírka prvého elementu 200px a šírka druhého elementu - 100px.

Nastavme teraz prvému elementu flex-grow na hodnotu 3 a druhému - na hodnotu 1. Súčet flex-grow bude 4. Jedna jednotka flex-grow sa teda rovná 100px / 4 = 25px.

K prvému elementu sa pridá 75px, a bude mať 275px, a k druhému - 25px, bude mať 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;
}

Результат:

Praktické úlohy

Vo všetkých úlohách nižšie vám bude predstavený nejaký kód s flex elementmi, ktoré majú šírku a flex-grow. Na základe predstaveného kódu vypočítajte, aké rozmery bude mať každý z elementov. Potom spustite kód a skontrolujte svoje výpočty odmeraním skutočných šírok elementov.

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;
}