Flex-grow xususiyati

flex-grow xususiyati alohida flex-blok kerak bo'lganda qo'shni elementlardan qancha katta bo'lishi mumkinligini belgilaydi.

Masalan, agar flex-konteyner ichidagi barcha flex-bloklar flex-grow:1 ga ega bo'lsa, ular teng o'lchamda bo'ladilar. Agar ulardan biri flex-grow:2 ga ega bo'lsa, u boshqalarga qaraganda 2 baravar katta bo'ladi.

Agar elementlarning umumiy kengligi ota elementning kengligidan kichik bo'lsa, o'ng tomonda bosh joy qoladi. Istasangiz, bu bosh joyni elementlar o'rtasida mutanosib taqsimlash mumkin. Bunga flex-grow xususiyati yordamida erishiladi, u flex-elementlarga beriladi. Bu xususiyatning qiymati o'lchamsiz sondir.

Qo'llanilishi: aniq flex blokga.

Bu xususiyat flex qisqartirilgan xususiyatning tarkibiy qismi hisoblanadi.

Sintaksis

selector {
	flex-grow: musbat son;
}

Standart qiymati: 0.

Misol

Hozirda bizda kengligi 100px bo'lgan ikkita flex-blok bor. Ularning umumiy kengligi 200px, ota elementning kengligi esa - 300px. Demak, 100px bo'sh joy qolmoqda.

Agar elementlarga flex-grow berilmagan bo'lsa, biz shunchaki bu bo'sh joyni ko'ramiz. Agar berilgan bo'lsa, elementlarning haqiqiy kengligi belgilanganidan katta bo'ladi - ular bo'sh joyni o'zaro mutanosib taqsimlab, o'z kengligiga qo'shadilar.

Misol uchun, birinchi elementning flex-grow qiymati 1, ikkinchisiniki esa - 3 bo'lsin. Keling, har bir element qancha bo'sh joy olishini hisoblaylik.

Avvalo, barcha elementlarning flex-grow birliklari yig'indisini topish kerak. Birinchi elementniki 1, ikkinchisiniki esa 3. Bu yig'indi 4 ekanligini anglatadi.

Endi 100px bo'sh joyni 4 ga bo'lamiz va har bir flex-grow birligiga 25px to'g'ri kelishini topamiz. Demak, birinchi elementga bitta flex-grow birligi, ya'ni 25px qo'shiladi, ikkinchisiga esa uchta birlik, ya'ni 75px qo'shiladi.

Birinchi elementning kengligi 125px, ikkinchisiniki esa 175px bo'ladi:

<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;
}

Misol

Endi ota elementning kengligi 400px, birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin. Demak, bo'sh joy yana 100px ga teng.

Keling, har bir elementga flex-grow qiymatini 1 deb belgilaylik. Yig'indi 2 bo'ladi, demak 100px bo'sh joyni 2 ga bo'lish kerak. Har bir birlik uchun 50px to'g'ri keladi.

flex-grow qiymati barcha elementlar uchun bir xil bo'lgani uchun, barcha elementlarga 50px qo'shiladi. Bu birinchi element 250px, ikkinchi element esa 150px bo'lishini anglatadi:

<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;
}

Misol

Yana ota elementning kengligi 400px, birinchi elementning kengligi 200px, ikkinchi elementning kengligi esa - 100px bo'lsin.

Keling, endi birinchi elementning flex-grow qiymatini 3, ikkinchisiniki esa 1 deb belgilaylik. Yig'indi 4 bo'ladi. Bitta birlik uchun 100px / 4 = 25px to'g'ri keladi.

Birinchi elementga 75px qo'shiladi, u 275px bo'ladi, ikkinchisiga esa 25px qo'shiladi, u 125px bo'ladi:

<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;
}

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklar o'qlarining yo'nalishini belgilaydi
justify-content xususiyati,
bu asosiy o'q bo'yicha tekislashni belgilaydi
align-items xususiyati,
bu ko'ndalang o'q bo'yicha tekislashni belgilaydi
flex-wrap xususiyati,
bu flex bloklarning ko'p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
bu flex bloklarning tartibini belgilaydi
align-self xususiyati,
bu bitta blokning tekislanishini belgilaydi
flex-basis xususiyati,
bu aniq flex blokning o'lchamini belgilaydi
flex-shrink xususiyati,
bu flex bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma