CSS'теги Flex элементтеринин курчтугу

Азыр бизде катарга тизилген эки flex-блок бар деп коёлу. Бул блокторго 100px туурасы берилген, ал эми ата-энесине - 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Көрүп тургандарыңыздай, биздин элементтердин жалпы туурасы ата-энесинин туурасынан кичине, ошондуктан оң жагында бош мейкиндик калат.

Каалаган учурда бул бош мейкиндикти биздин элементтердин арасына пропорционалдуу бөлүүгө болот. Бул flex-grow касиети аркылуу жасалат, ал flex-элементтерине берилет. Бул касиеттин мааниси өлчөмсүз сан.

Келгиле, бул касиеттин иш жүзүндө кандай иштешин көрөлү.

Мисал

Азыр бизде туурасы 100px болгон эки flex-блок бар. Элементтердин жалпы туурасы 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-grow бар flex-элементтери бар бир код сунушталат. Сунушталган коддун негизинде ар бир элементтин кандай өлчөмдөргө ээ болорун эсептегиле. Андан кийин кодду иштетип, эсептөөлөрүңүздү чындыкка текшерип, элементтердин чыныгы туурасын өлчөгүлө.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	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;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 1000px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 100px;
	flex-grow: 4;
}
.elem4 {
	width: 100px;
	flex-grow: 3;
}