Уласцівасць 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. Тады адна адзінка прагнасці роўная 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