Flex-grow xassəsi

flex-grow xassəsi müəyyən edir ki, əgər lazımdırsa, ayrı bir flex-blok qonşu elementlərdən nə qədər böyük ola bilər.

Məsələn, əgər flex-konteynerin içindəki bütün flex-bloklar flex-grow:1 dəyərinə malikdirsə, onda onlar eyni ölçüdə olacaqlar. Əgər onlardan birinin flex-grow:2 dəyəri varsa, onda o, qalanların hamısından 2 dəfə böyük olacaq.

Əgər elementlərin ümumi eni valideynin enindən kiçikdirsə, sağ tərəfdə boş yer qalır. İstəyə bağlı olaraq bu boş yeri elementlərimiz arasında mütənasib bölmək olar. Bu, flex-elementlərə tətbiq edilən flex-grow xassəsi vasitəsilə edilir. Bu xassənin dəyəri ölçüsüz bir ədəddir.

Tətbiq edilir: konkret flex bloka.

Bu xassə flex qısaldılmış xassəsinin tərkib hissəsi kimi daxildir.

Sintaksis

selektor {
	flex-grow: müsbət ədəd;
}

Standart dəyər: 0.

Nümunə

Hal-hazırda bizim ənləri 100px olan iki flex-blokumuz var. Elementlərin ümumi eni 200px, valideynin eni isə 300px-dir. Belə çıxır ki, 100px sərbəst yer qalır.

Əgər elementlərə flex-grow təyin edilməyibsə, onda biz sadəcə olaraq bu sərbəst yeri görərik. Əgər təyin edilibsə, onda elementlərin real eni təyin olunmuş undan daha böyük olacaq - onlar sərbəst yeri öz aralarında mütənasib bölüşdürəcək və onu öz enlərinə əlavə edəcəklər.

Nümunə üçün deyək ki, birinci elementin flex-grow dəyəri 1, ikincininki isə 3-dir. Gəlin hesablayaq, hər bir element sərbəst yerdən nə qədər alacaq.

Əvvəlcə bütün elementlərimizin flex-grow vahidlərinin ümumi miqdarını almaq lazımdır. Birinci elementinki 1, ikincininki isə 3-dir. Bu o deməkdir ki, ümumi miqdar 4-dir.

İndi 100px sərbəst yeri 4-ə bölək və alaq ki, bir flex-grow vahidinə 25px düşür. Belə çıxır ki, birinci elementə bir vahid flex-grow, yəni 25px əlavə olunacaq, ikinciyə isə üç vahid, yəni 75px əlavə olunacaq.

Birinci elementin eni 125px olacaq, ikincininki isə 175px olacaq:

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

Nümunə

İndi deyək ki, valideynin eni 400px-dir, birinci elementin eni 200px, ikinci elementin eni isə 100px-dir. Belə çıxır ki, sərbəst yer yenə 100px-dir.

Gəlin hər bir elementə flex-grow dəyərini 1 olaraq təyin edək. Ümumilikdə 2 alınacaq, yəni 100px sərbəst yeri 2-ə bölmək lazımdır. Belə çıxır ki, bir vahid tamahkarlığa 50px düşür.

Çünki bütün elementlərin flex-grow dəyəri eynidir, onda bütün elementlərə eyni miqdarda, yəni 50px əlavə olunacaq. Bu o deməkdir ki, birinci element 250px olacaq, ikinci element isə 150px olacaq:

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

Nümunə

Təkrar deyək ki, valideynin eni 400px-dir, birinci elementin eni 200px, ikinci elementin eni isə 100px-dir.

İndi gəlin birinci elementə flex-grow dəyərini 3, ikinciyə isə 1 təyin edək. Belə çıxır ki, ümumi tamahkarlıq 4-dir. Onda bir vahid tamahkarlıq 100px / 4 = 25px-dir.

Birinci elementə 75px əlavə olunacaq, və o 275px olacaq, ikinciyə isə 25px əlavə olunacaq, o 125px olacaq:

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

Həmçinin bax

flex-direction xassəsi,
bu, flex blokların oxlarının istiqamətini təyin edir
justify-content xassəsi,
bu, əsas ox üzrə düzləndirməni təyin edir
align-items xassəsi,
bu, çarpaz ox üzrə düzləndirməni təyin edir
flex-wrap xassəsi,
bu, flex blokların çoxsətirliliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaldılmış xassə
order xassəsi,
bu, flex blokların sırasını təyin edir
align-self xassəsi,
bu, bir blokun düzləndirilməsini təyin edir
flex-basis xassəsi,
bu, konkret flex blokun ölçüsünü təyin edir
flex-shrink xassəsi,
bu, flex blokların sıxılabilmə qabiliyyətini təyin edir
flex xassəsi,
flex-grow, flex-shrink və flex-basis üçün qısaldılmış xassə