Zachłanność elementów flex w CSS

Załóżmy, że mamy teraz dwa bloki flex, ułożone w rzędzie. Tym blokom nadano szerokość 100px, a ich rodzicowi - 300px:

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

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Jak widzisz, łączna szerokość naszych elementów jest mniejsza niż szerokość rodzica, więc 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, nadawanej elementom flex. Wartością tej właściwości jest bezwymiarowa liczba.

Spójrzmy w praktyce, jak działa ta właściwość.

Przykład

Teraz mamy dwa bloki flex o szerokości 100px. Ich łączna szerokość elementów wynosi 200px, a szerokość rodzica - 300px. Okazuje się, że pozostaje wolna przestrzeń o wymiarach 100px.

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

Załóżmy dla przykładu, że pierwszy element ma flex-grow równy 1, a drugi - 3. Obliczmy, jaką część wolnej przestrzeni otrzyma każdy element.

Na początek należy uzyskać całkowitą liczbę jednostek flex-grow wszystkich naszych elementów. Dla pierwszego elementu wynosi ona 1, a dla 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 zostanie dodana 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

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

Nadajmy 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ę zachłanności.

Ponieważ wszystkie elementy mają tę samą wartość flex-grow, to do wszystkich elementów zostanie dodana ta sama wartość wynosząca 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

Załóżmy ponownie, że 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 zachłanność w sumie wynosi 4. Wtedy jedna jednostka zachłanności równa się 100px / 4 = 25px.

Do pierwszego elementu zostanie dodane 75px, i stanie się on 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;
}

Zadania praktyczne

We wszystkich poniższych zadaniach zostanie ci przedstawiony kod z elementami flex, które mają szerokość i flex-grow. Na podstawie przedstawionego kodu oblicz, jakie rozmiary będzie miał każdy z elementów. Następnie uruchom kod i sprawdź swoje obliczenia, mierząc rzeczywiste szerokości elementów.

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

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

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

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

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

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

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

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