Својство 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. Oнда једна јединица прождрљивости једнака 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