Reglering av komprimering av flexboxar i CSS

Som standard tas bitar bort från alla element i proportion till elementets bredd. Det är dock möjligt att göra så att vissa element får större eller mindre bitar borttagna. För detta finns en speciell egenskap flex-shrink.

Denna egenskap representerar en viss vikt, med vilken elementets bredd kommer att multipliceras vid beräkning av den borttagna biten enligt ovanstående formel. Till exempel, om bredden på elementet är 200px, och dess flex-shrink är 3, så blir den viktade (dvs. multiplicerad med vikten) bredden på elementet lika med:

200px * 3 = 600px

Formeln med hänsyn till flex-shrink kommer att ha följande form: negativt ledigt utrymme * (viktad bredd på elementet / summan av alla viktade bredder av element).

Låt oss titta på ett exempel. Låt oss säga att vi har 4 element. Låt bredden på det första elementet vara 400px, och flex-shrink är 2, bredden på de andra elementen - 200px, och deras flex-shrink är 1. Låt förälderns bredd vara 900px.

Den totala bredden på elementen är:

400px + 3 * 200px = 1000px

Det negativa lediga utrymmet blir:

1000px - 900px = 100px

Den totala viktade bredden på elementen är:

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

Den viktade bredden på det första elementet är:

400px * 2 = 800px

Följande bit kommer att tas bort från det första elementet:

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

Elementets bredd blir:

400px - 57.14px = 342.86px ~ 343px

Den viktade bredden för vart och ett av de andra elementen är:

200px * 1 = 200px

Följande bit kommer att tas bort från varje element:

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

Elementets bredd blir:

200px - 14.2px = 185.8px ~ 186px

Implementera de beskrivna blocken och kontrollera med mätning att bredden på elementen verkligen är lika med den vi beräknat.

Beräkna bredden på blocken och kontrollera sedan beräkningarna med mätning:

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

Beräkna bredden på blocken och kontrollera sedan beräkningarna med mätning:

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

Beräkna bredden på blocken och kontrollera sedan beräkningarna med mätning:

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