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 барабар.

Келгиле, ар бир элементке 1 барабар flex-grow белгилейли. Жалпы суммасы 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 касиети,
флекс блокторунун огунун багытын белгилейт
justify-content касиети,
негизги огу боюнча тегиздөөнү белгилейт
align-items касиети,
көндүрмө огу боюнча тегиздөөнү белгилейт
flex-wrap касиети,
флекс блокторунун көп саптуулугун белгилейт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартылган түр
order касиети,
флекс блокторунун тартибин белгилейт
align-self касиети,
бир блоктун тегиздөөсүн белгилейт
flex-basis касиети,
белгилүү бир flex блогунун өлчөмүн белгилейт
flex-shrink касиети,
флекс блокторунун кыскарышын белгилейт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартылган түр