Хусусияти flex-grow

Хусусияти flex-grow онро муайян мекунад, ки як блоки флексии мушаххас чӣ қадар метавонад аз унсурҳои ҳамсояаш калонтар бошад, агар он лозим бошад.

Масалан, агар ҳамаи блокҳои флекс дар дохили контейнери флекс flex-grow:1 дошта бошанд, пас онҳо андозаи яксон хоҳанд дошт. Агар яке аз онҳо flex-grow:2 дошта бошад, пас он дар 2 маротиба аз ҳамаи дигар калонтар хоҳад буд.

Агар паҳнои умумии унсурҳо аз паҳнои волидайн хурдтар бошад, пас дар тарафи рост фазои холӣ боқӣ мемонад. Агар хоҳанд, ин фазои холӣ метавонад ба таври мутаносиб байни унсурҳои мо тақсим карда шавад. Ин бо ёрии хусусияти flex-grow анҷом дода мешавад, ки ба унсурҳои флекс дода мешавад. Қимати ин хусусият адади беандоза аст.

Ба кор бурда мешавад: ба блоки флексии мушаххас.

Ин хусусият ҳамчун қисми таркибӣ ба хусусияти мухтасари 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,
ки самти меҳвари блокҳои флексро муайян мекунад
хусусияти justify-content,
ки ҳамвории бо меҳвари асосӣ муайян мекунад
хусусияти align-items,
ки ҳамвории бо меҳвари фаръиро муайян мекунад
хусусияти flex-wrap,
ки чандсатрии блокҳои флекс муайян мекунад
хусусияти flex-flow,
мухтасари flex-direction ва flex-wrap
хусусияти order,
ки тартиби блокҳои флексро муайян мекунад
хусусияти align-self,
ки ҳамвории як блокро муайян мекунад
хусусияти flex-basis,
ки андозаи блоки флексии мушаххасро муайян мекунад
хусусияти flex-shrink,
ки фишурдашавии блокҳои флексро муайян мекунад
хусусияти flex,
мухтасари flex-grow, flex-shrink ва flex-basis