Właściwość flex-grow

Właściwość flex-grow określa to, na ile pojedynczy blok flex może być większy od sąsiednich elementów, jeśli jest to konieczne.

Na przykład, jeśli wszystkie bloki flex wewnątrz kontenera flex mają flex-grow:1, to będą one miały jednakowy rozmiar. Jeśli jeden z nich ma flex-grow:2, to będzie on 2 razy większy niż wszystkie pozostałe.

Jeśli sumaryczna szerokość elementów jest mniejsza niż szerokość rodzica, po prawej stronie pozostaje pusta przestrzeń. W razie potrzeby tę pustą przestrzeń można proporcjonalnie podzielić między naszymi elementami. Robimy to za pomocą właściwości flex-grow, ustawianej elementom flex. Wartością tej właściwości jest liczba bezwymiarowa.

Stosuje się do: konkretnego bloku flex.

Ta właściwość wchodzi w skład skrótu właściwości flex.

Składnia

selektor {
	flex-grow: liczba dodatnia;
}

Wartość domyślna: 0.

Przykład

Teraz mamy dwa bloki flex o szerokości 100px. Ich sumaryczna szerokość 200px, a szerokość rodzica - 300px. Okazuje się, że pozostaje wolna przestrzeń 100px.

Jeśli elementom nie jest ustawiony flex-grow, po prostu zobaczymy tę wolną przestrzeń. Jeśli jest im ustawiony, to rzeczywista szerokość elementów będzie większa niż ustawiona - proporcjonalnie podzielą między siebie wolną przestrzeń i dodadzą ją do swojej szerokości.

Niech dla przykładu u pierwszego elementu flex-grow wynosi 1, a u drugiego - 3. Obliczmy, jaką część wolnej przestrzeni otrzyma każdy element.

Najpierw trzeba uzyskać sumaryczną liczbę jednostek flex-grow wszystkich naszych elementów. U pierwszego elementu wynosi ona 1, a u drugiego - 3. Oznacza to, że suma wynosi 4.

Podzielmy teraz 100px wolnej przestrzeni przez 4 i otrzymamy, że 25px przypada na jedną jednostkę flex-grow. Okaże się, że do pierwszego elementu doda się jedna jednostka flex-grow, czyli 25px, a do drugiego - trzy jednostki, czyli 75px.

Szerokość pierwszego elementu wyniesie 125px, a drugiego - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

Przykład

Niech teraz szerokość rodzica wynosi 400px, szerokość pierwszego elementu 200px, a szerokość drugiego elementu - 100px. Okaże się, że wolna przestrzeń znów wynosi 100px.

Ustawmy każdemu elementowi flex-grow, równy 1. W sumie otrzymamy 2, czyli 100px wolnej przestrzeni trzeba podzielić przez 2. Okaże się, że 50px przypada na jedną jednostkę chciwości.

Ponieważ wszystkie elementy mają tę samą wartość flex-grow, to do wszystkich elementów doda się ta sama wartość 50px. Oznacza to, że pierwszy element stanie się 250px, i a drugi stanie się 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

Przykład

Niech znów szerokość rodzica wynosi 400px, szerokość pierwszego elementu 200px, a szerokość drugiego elementu - 100px.

Ustawmy teraz pierwszemu elementowi flex-grow na wartość 3, a drugiemu - na wartość 1. Okaże się, że chciwość w sumie wynosi 4. Wtedy jedna jednostka chciwości równa się 100px / 4 = 25px.

Do pierwszego elementu doda się 75px, i stanie się 275px, a do drugiego - 25px, stanie się 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi bloków flex
właściwość justify-content,
która ustawia wyrównanie wzdłuż osi głównej
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej
właściwość flex-wrap,
która ustawia zawijanie bloków flex
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność bloków flex
właściwość align-self,
która ustawia wyrównanie pojedynczego bloku
właściwość flex-basis,
która ustawia rozmiar konkretnego bloku flex
właściwość flex-shrink,
która ustawia ściśliwość bloków flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis