Zero Greed ya Vipengele vya Flex katika CSS

Ikiwa flex-grow ni sawa na sifuri kwa kipengele fulani, basi kipengele hicho hakishiriki katika usambazaji wa nafasi iliyowazi. Kwa default, greed hasa ina thamani ya sifuri na kwa hivyo vipengele visivyopewa flex-grow havigawanyi nafasi iliyowazi kati yao.

Wacha kwa mfano tufanye hesabu fulani. Tuchukulie tuna vipengele vitatu vya flex, kila kimoja kwa upana wa 100px. Mcha wa kwanza usiwe na flex-grow (au iwe sawa na 0), kipengele cha pili kiwe na flex-grow, kiwe sawa na 2, na cha tatu - kiwe sawa na 3.

Tuchukulie upana wa mzazi ni 500px. Basi nafasi iliyowazi itakuwa sawa na 200px, na kwa kila kitengo kimoja cha flex-grow itakuwa 200px / 5 = 40px. Itatokea kwamba upana wa kipengele cha kwanza utabaki kuwa 100px, kwa kuwa hakishiriki katika usambazaji, upana wa pili utakuwa 100px + 2 * 40px = 180px, na upana wa tatu - 100px + 3 * 40px = 220px.

Kazi za Vitendo

Katika kazi zote hapa chini utapewa baadhi ya msimbo na vipengele vya flex vilivyo na upana na flex-grow. Kulingana na msimbo uliowasilishwa hesabu, vipimo gani kila kipengele kitakuwa nayo. Kisha anzisha msimbo na uhakikishe hesabu zako, ukipima upana halisi wa vipengele.

<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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}