Regulering van Vleksblok-Kompressie in CSS

Standaard word daar stukkies van alle elemente afgeknip, proporsioneel tot die breedte van die element. Dit is egter moontlik om te maak dat sommige elemente groter of kleiner stukkies laat afknip. Vir hierdie doel is daar 'n spesiale eienskap flex-shrink.

Hierdie eienskap verteenwoordig 'n sekere gewig waarmee die element se breedte vermenigvuldig sal word by die berekening van die afgeknipte stukkie volgens die bostaande formule. Byvoorbeeld, as die breedte van die element gelyk is aan 200px, en sy flex-shrink gelyk is aan 3, dan sal die geweegde (d.w.s. vermenigvuldig met die gewig) breedte van die element gelyk wees aan:

200px * 3 = 600px

Die formule met inagneming van flex-shrink sal die volgende vorm hê: neg. vrye ruimte * (geweegde breedte van element / som van alle geweegde breedtes van elemente).

Kom ons kyk na 'n voorbeeld. Laat ons aanneem daar is 4 elemente. Laat die breedte van die eerste element gelyk wees aan 400px, en sy flex-shrink gelyk aan 2, die breedte van die res van die elemente - 200px, en hul flex-shrink gelyk aan 1. Laat die ouer se breedte 900px wees.

Die totale breedte van die elemente is gelyk aan:

400px + 3 * 200px = 1000px

Die negatiewe vrye ruimte sal gelyk wees aan:

1000px - 900px = 100px

Die totale geweegde breedte van die elemente is gelyk aan:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Die geweegde breedte van die eerste element is gelyk aan:

400px * 2 = 800px

Die volgende stukkie sal van die eerste element afgeknip word:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Die breedte van die element sal gelyk wees aan:

400px - 57.14px = 342.86px ~ 343px

Die geweegde breedte van elk van die ander elemente is gelyk aan:

200px * 1 = 200px

Die volgende stukkie sal van elke element afgeknip word:

100px * (200px / 1400px) = 100px * 0.1428 = 14.28px ~ 14.3px

Die breedte van elke element sal gelyk wees aan:

200px - 14.3px = 185.7px ~ 186px

Implementeer die beskryfde blokke en bevestig deur meting dat die breedte van die elemente inderdaad gelyk is aan wat ons bereken het.

Bereken die breedte van die blokke, en kontroleer dan die berekeninge deur meting:

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

Bereken die breedte van die blokke, en kontroleer dan die berekeninge deur meting:

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

Bereken die breedte van die blokke, en kontroleer dan die berekeninge deur meting:

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