Regulering av kompresjon av flex-blokker i CSS

Som standard blir biter klypet av alle elementer, proporsjonalt med elementets bredde. Imidlertid kan man gjøre det slik at noen elementer får større eller mindre biter klypet av. For dette finnes det en spesiell egenskap flex-shrink.

Denne egenskapen representerer en viss vekt, som elementets bredde vil bli multiplisert med ved beregning av den avklippede biten i henhold til den allerede nevnte formelen. For eksempel, hvis bredden på elementet er 200px, og dets flex-shrink er 3, så vil den veide (dvs. multiplisert med vekt) bredden på elementet blir:

200px * 3 = 600px

Formelen med hensyn til flex-shrink vil ha følgende form: neg. fritt rom * (veid bredde på element / summen av alle veide bredder av elementer).

La oss se på et eksempel. La oss si at vi har 4 elementer. La bredden på det første elementet være 400px, og flex-shrink er 2, bredden på de andre elementene - 200px, og deres flex-shrink er 1. La bredden på forelderen være 900px.

Total bredde på elementene er:

400px + 3 * 200px = 1000px

Negativt fritt rom vil være:

1000px - 900px = 100px

Total veid bredde på elementene er:

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

Den veide bredden til det første elementet er:

400px * 2 = 800px

Følgende bit vil bli klypet av fra det første elementet:

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

Bredden på elementet vil være:

400px - 57.14px = 342.86px ~ 343px

Den veide bredden til hvert av de andre elementene er:

200px * 1 = 200px

Følgende bit vil bli klypet av fra hvert element:

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

Bredden på elementet vil være:

200px - 14.2px = 185.8px ~ 186px

Implementer de beskrevne blokkene og kontroller med måling, at bredden på elementene faktisk er lik den vi har beregnet.

Beregn bredden på blokkene, og kontroller deretter beregningene 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 på blokkene, og kontroller deretter beregningene 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 på blokkene, og kontroller deretter beregningene 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;
}