Алчноста на флекс елементите во 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;
}