Својството flex-grow

Својството flex-grow одредува тоа, колку одделниот flex-блок може да биде поголем од соседните елементи, ако тоа е потребно.

На пример, ако сите flex-блокови внатре во flex-контејнерот имаат flex-grow:1, тогаш тие ќе бидат со иста големина. Ако еден од нив има flex-grow:2, тогаш тој ќе биде 2 пати поголем од сите останати.

Ако вкупната ширина на елементите е помала од ширината на родителот, поради што останува празен простор десно. Доколку се посакува, овој празен простор може да се пропорционално подели меѓу нашите елементи. Ова се прави со помош на својството flex-grow, кое се задава на флекс-елементите. Вредноста на ова својство е бездимензионален број.

Се применува на: конкретен flex блок.

Ова својство влегува како составен дел во кратенката својство flex.

Синтакса

селектор {
	flex-grow: позитивен број;
}

Стандардна вредност: 0.

Пример

Сега имаме два флекс-блока со ширина од 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. Tогаш една единица алчност е еднаква на 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-direction,
кое го задава правецот на оските на flex блоковите
својството justify-content,
кое го задава усогласувањето по главната оска
својството align-items,
кое го задава усогласувањето по попречната оска
својството flex-wrap,
кое ја задава повеќелинискоста на flex блоковите
својството flex-flow,
кратенка за flex-direction и flex-wrap
својството order,
кое го задава редоследот на flex блоковите
својството align-self,
кое го задава усогласувањето на еден блок
својството flex-basis,
кое ја задава големината на конкретниот flex блок
својството flex-shrink,
кое ја задава стисливоста на flex блоковите
својството flex,
кратенка за flex-grow, flex-shrink и flex-basis