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-ке бөліп, flex-grow бір бірлігіне 25px келетінін аламыз. Бұл бірінші элементке бір бірлік 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 үшін қысқарту