Flex bloku saspiešanas regulēšana CSS

Pēc noklusējuma no visiem elementiem tiek atņemtas daļas, kas proporcionālas elementa platumam. Tomēr, ir iespējams panākt, ka no dažiem elementiem tiek atņemtas lielākas vai mazākas daļas. Šim nolūkam pastāv īpašs īpašums flex-shrink.

Šis īpašums ir noteikts svars, ar kuru tiks reizināts elementa platums pie atņemamās daļas aprēķina pēc jau iepriekš dotās formulas. Piemēram, ja elementa platums ir 200px, un tā flex-shrink ir 3, tad svērtais (t.i., reizināts ar svaru) elementa platums būs vienāds ar:

200px * 3 = 600px

Formula, ņemot vērā flex-shrink, būs šādā formā: negatīvā brīvā telpa * (svērtais elementa platums / visu elementu svērto platumu summa).

Apskatīsim piemērā. Pieņemsim, ka mums ir 4 elementi. Lai pirmā elementa platums ir 400px, un flex-shrink ir 2, pārējo elementu platums - 200px, un to flex-shrink ir 1. Lai vecāka platums ir 900px.

Kopējais elementu platums ir:

400px + 3 * 200px = 1000px

Negatīvā brīvā telpa būs:

1000px - 900px = 100px

Kopējais svērtais elementu platums ir:

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

Pirmā elementa svērtais platums ir:

400px * 2 = 800px

No pirmā elementa tiks atņemts šāds daudzums:

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

Elementa platums būs:

400px - 57.14px = 342.86px ~ 343px

Katra no pārējiem elementiem svērtais platums ir:

200px * 1 = 200px

No katra elementa tiks atņemts šāds daudzums:

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

Elementa platums būs:

200px - 14.2px = 185.8px ~ 186px

Realizējiet aprakstītos blokus un pārbaudiet ar mērījumu, ka elementu platums patiešām būs vienāds ar mūsu aprēķināto.

Aprēķiniet bloku platumu un pēc tam pārbaudiet aprēķinus ar mērījumu:

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

Aprēķiniet bloku platumu un pēc tam pārbaudiet aprēķinus ar mērījumu:

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

Aprēķiniet bloku platumu un pēc tam pārbaudiet aprēķinus ar mērījumu:

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