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-ի համար