Regulering af komprimering af flex-blokke i CSS

Som standard knipses der stykker fra alle elementer, proportionalt med elementets bredde. Det er dog muligt at gøre således, at der knipses større eller mindre stykker fra visse elementer. Til dette findes der en speciel egenskab flex-shrink.

Denne egenskab repræsenterer en vis vægt, som elementets bredde vil blive multipliceret med ved beregning af det afklippede stykke ifølge den allerede anførte formel. For eksempel, hvis elementets bredde er 200px, og dets flex-shrink er 3, så vil den vægtede (dvs. multipliceret med vægten) bredde af elementet blive:

200px * 3 = 600px

Formlen under hensyntagen til flex-shrink vil have følgende form: negativt frit rum * (vægtet bredde af elementet / summen af alle vægtede bredder af elementer).

Lad os se på et eksempel. Antag at vi har 4 elementer. Lad bredden af det første element være 400px, og flex-shrink er 2, bredden af de resterende elementer - 200px, og deres flex-shrink er 1. Lad bredden af forælderen være 900px.

Den samlede bredde af elementerne er:

400px + 3 * 200px = 1000px

Det negative frie rum vil være:

1000px - 900px = 100px

Den samlede vægtede bredde af elementerne er:

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

Den vægtede bredde af det første element er:

400px * 2 = 800px

Der vil blive knipset følgende stykke fra det første element:

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

Elementets bredde vil være:

400px - 57.14px = 342.86px ~ 343px

Den vægtede bredde af hvert af de resterende elementer er:

200px * 1 = 200px

Der vil blive knipset følgende stykke fra hvert element:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Bredden af hvert element vil være:

200px - 14.2px = 185.8px ~ 186px

Implementer de beskrevne blokke og kontroller ved måling, at bredden af elementerne faktisk er lig med den, vi har beregnet.

Beregn bredden af blokkene, og kontroller derefter beregningerne med måling:

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

Beregn bredden af blokkene, og kontroller derefter beregningerne med måling:

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

Beregn bredden af blokkene, og kontroller derefter beregningerne med måling:

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