Nul-gierigheid van fleks elemente in CSS

As flex-grow gelyk is aan nul vir 'n sekere element, dan sal daardie element nie deelneem aan die verdeling van vry spasie nie. By verstek het gierigheid presies 'n nulwaarde en daarom deel elemente sonder 'n gespesifiseerde flex-grow nie die vry spasie onder mekaar nie.

Kom ons doen 'n berekening as voorbeeld. Laat ons drie fleks-elemente hê, elk met 'n wydte van 100px. Laat die eerste element nie flex-grow hê nie (of dit is gelyk aan 0), die tweede element het flex-grow, gelyk aan 2, en die derde - gelyk aan 3.

Laat die ouer se wydte gelyk wees aan 500px. Dan sal die vry spasie gelyk wees aan 200px, en een eenheid flex-grow sal kry 200px / 5 = 40px. Dit beteken dat die wydte van die eerste element steeds 100px sal bly, aangesien dit nie aan die verdeling deelneem nie, die wydte van die tweede sal 100px + 2 * 40px = 180px wees, en die wydte van die derde - 100px + 3 * 40px = 220px.

Praktiese take

In al die take hieronder sal aan u voorgestel word sekere kode met fleks-elemente wat wydte en flex-grow het. Bereken volgens die voorgestelde kode watter afmetings elke van die elemente sal hê. Lanceer dan die kode en toets jou berekeninge deur die werklike wydtes van die elemente te meet.

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