Пожудљивост флекс елемената у CSS-у

Претпоставимо да сада имамо два флекс блока, поређана у ред. Ови блокови имају задату ширину од 100px, а њиховом родитељу - 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;
}

Као што видите, укупна ширина наших елемената је мања од ширине родитеља, па са десне стране остаје празан простор.

По жељи, овај празан простор се може пропорционално поделити између наших елемената. То се ради помоћу својства flex-grow, које се задаје флекс елементима. Вредност овог својства је бездимензиони број.

Да видимо у пракси како функционише ово својство.

Пример

Сада имамо два флекс блока са ширином од 100px. Њихова укупна ширина је 200px, а ширина родитеља је 300px. Излази да остаје слободан простор од 100px.

Ако елементима није задат flex-grow, онда ћемо једноставно видети тај слободан простор. Ако им је задат, онда ће стварна ширина елемената бити већа од задате - они ће пропорционално поделити слободан простор међу собом и додати га својој ширини.

Рецимо за пример да први елемент има flex-grow једнак 1, а други - 3. Хајде да израчунамо, који део слободног простора ће добити сваки елемент.

Прво треба да добијемо укупан број јединица flex-grow свих наших елемената. Код првог елемента једнак је 1, а код другог - 3. То значи да је у збиру једнак 4.

Поделимо сада 100px слободног простора са 4 и добијамо да 25px отпада на једну јединицу flex-grow. Излази, да ће се првом елементу додати једна јединица flex-grow, то јест 25px, а другом - три јединице, то јест 75px.

Ширина првог елемента ће бити 125px, а другог - 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;
}

Пример

Рецимо сада да је ширина родитеља једнака 400px, ширина првог елемента 200px, а ширина другог елемента - 100px. Излази, да је слободан простор поново једнак 100px.

Хајде да сваком елементу задамо flex-grow, једнак 1. У збиру ће бити 2, то јест 100px слободног простора треба поделити са 2. Излази да 50px отпада на једну јединицу пожудљивости.

Како сви елементи имају исту вредност flex-grow, онда ће се свим елементима додати иста вредност од 50px. То значи, да ће први елемент постати 250px, и а други ће постати 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;
}

Пример

Рецимо поново да је ширина родитеља једнака 400px, ширина првог елемента 200px, а ширина другог елемента - 100px.

Хајде сада првом елементу да поставимо flex-grow на вредност 3, а другом - на вредност 1. Излази да је пожудљивост у збиру једнака 4. Онда једна јединица пожудљивости једнака 100px / 4 = 25px.

Првом елементу ће се додати 75px, и он ће постати 275px, а другом - 25px, он ће постати 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;
}

Практични задаци

У свим задацима испод биће вам представљен одређени код са флекс елементима који имају ширину и flex-grow. На основу представљеног кода израчунајте, које димензије ће имати сваки од елемената. Затим покрените код и проверите ваше прорачуне, измеривши стварне ширине елемената.

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