Жаднасць флекс элементаў у 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;
}