Свойство flex-grow

Свойство flex-grow шунни аниқлайки, агар зарур бўлса, алохида flex-блок қўшни элементлардан қанча катта бўлиши мумкин.

Мисол учун, агар flex-контейнер ичидаги барча flex-блоклар flex-grow:1 га эга бўлса, улар бир хил ўлчамда бўлади. Агар улардан бири flex-grow:2 га эга бўлса, у ҳамма қолганлардан 2 марта катта бўлади.

Агар элементларнинг умумий эни ота-онанинг энидан кичик бўлса, ўнг томонда бўш joy қолади. Истак бўлса, бу бўш joyни бизнинг элементларимиз ўртасида пропорционал тақсимлаш мумкин. Бу flex-grow свойства орқали бажарилади, у флекс-элементларга белгиланади. Бу свойстванинг қиймати ўлчовсиз сондир.

Қўлланиши: алохида flex блока.

Бу свойства қисқартирилган свойстванинг бир қисми сифатида flex га киради.

Синтаксис

селектор {
	flex-grow: мусбат сон;
}

Оддий қиймат: 0.

Мисол

Ҳозирда бизда эни 100px бўлган икки флекс-блок бор. Уларнинг умумий эни 200px, ота-онанинг эни эса - 300px. Демак, 100px бўш joy қолмокда.

Агар элементларга flex-grow белгиланмаган бўлса, биз бу бўш joyни кўрамиз. Агар у белгиланган бўлса, элементларнинг ҳақиқий эни белгиланган эндан катта бўлади - улар бўш joyни ўзаро пропорционал тақсимлашади ва уни ўз энига қўшади.

Мисол учун биринчи элементнинг flex-grow 1 га, иккинчисиники эса 3 га тенг бўлсин. Келинг ҳисоблайлик, ҳар бир элемент қанча бўш joy олишини.

Аввало бизнинг барча элементларимизнинг flex-grow бирликларининг жами миқдорини оламиз. Биринчи элемент учун у 1 га, иккинчи элемент учун эса 3 га тенг. Демак, жами у 4 га тенг.

Энди 100px бўш joyни 4 га бўламиз ва 25px бир flex-grow бирлигига тўғри келишини оламиз. Демак, биринчи элементга бир 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 га тенг бўлсин. Демак, бўш joy яна 100px га тенг.

Келинг ҳар бир элементга flex-grow ни, 1 га тенг белгилайлик. Жамида 2 бўлади, яъни 100px бўш joyни 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 блокларнинг кўп қatorliligini белгилайди
свойство flex-flow,
flex-direction ва flex-wrap учун қисқартириш
свойство order,
у flex блокларнинг тартибини белгилайди
свойство align-self,
у бир блокнинг тегиштиришини белгилайди
свойство flex-basis,
у алохида flex блокнинг ўлчамини белгилайди
свойство flex-shrink,
у flex блокларнинг сиқила ошлигини белгилайди
свойство flex,
flex-grow, flex-shrink ва flex-basis учун қисқартириш