Požudnost flex elemenata u CSS

Pretpostavimo da trenutno imamo dva flex bloka, poređana u red. Ovim blokovima je zadata širina od 100px, a njihovom roditelju - 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;
}

Результат:

Kao što vidite, ukupna širina naših elemenata manja je od širine roditelja, pa s desne strane ostaje prazan prostor.

Po želji, ovaj prazan prostor se može proporcionalno podeliti između naših elemenata. To se postiže pomoću svojstva flex-grow, koje se zadaje flex elementima. Vrednost ovog svojstva je bezdimenzioni broj.

Hajde da u praksi pogledamo kako radi ovo svojstvo.

Primer

Trenutno imamo dva flex bloka sa širinom od 100px. Njihova ukupna širina elemenata 200px, a širina roditelja je 300px. Ispada da ostaje slobodan prostor od 100px.

Ako elementima nije zadata flex-grow, onda ćemo jednostavno videti ovaj slobodan prostor. Ako im je zadat, onda će stvarna širina elemenata biti veća od zadate - oni će proporcionalno podeliti slobodan prostor između sebe i dodati ga svojoj širini.

Neka za primer prvi element ima flex-grow jednak 1, a drugi - 3. Hajde da izračunamo, koji deo slobodnog prostora će dobiti svaki element.

Za početak je potrebno dobiti ukupni broj jedinica flex-grow svih naših elemenata. Kod prvog elementa je jednak 1, a kod drugog - 3. To znači da je u zbiru jednak 4.

Podelimo sada 100px slobodnog prostora na 4 i dobijamo da 25px dolazi na jednu jedinicu flex-grow. Ispaće, da će se prvom elementu dodati jedna jedinica flex-grow, odnosno 25px, a drugom - tri jedinice, odnosno 75px.

Širina prvog elementa će biti 125px, a drugog - 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;
}

Результат:

Primer

Neka sada širina roditelja bude 400px, širina prvog elementa 200px, a širina drugog elementa - 100px. Ispaće, da je slobodan prostor opet jednak 100px.

Dajmo svakom elementu da zada flex-grow, jednak 1. U zbiru će ispasti 2, odnosno 100px slobodnog prostora treba podeliti na 2. Ispaće da 50px dolazi na jednu jedinicu požudnosti.

Pošto svi elementi imaju istu vrednost flex-grow, onda će se svim elementima dodati ista vrednost od 50px. To znači, da će prvi element postati 250px, i a drugi će postati 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;
}

Результат:

Primer

Neka opet širina roditelja bude 400px, širina prvog elementa 200px, a širina drugog elementa - 100px.

Hajde sada prvom elementu da postavimo flex-grow na vrednost 3, a drugom - na vrednost 1. Ispaće da je požudnost u zbiru jednaka 4. Tada je jedna jedinica požudnosti jednaka 100px / 4 = 25px.

Prvom elementu će se dodati 75px, i on će postati 275px, a drugom - 25px, on će postati 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;
}

Результат:

Praktični zadaci

U svim zadacima ispod biće vam predstavljen određeni kod sa flex elementima, koji imaju širinu i flex-grow. Na osnovu predstavljenog koda izračunajte, koje dimenzije će imati svaki od elemenata. Zatim pokrenite kod i proverite vaše proračune, izmerivši stvarne širine elemenata.

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