Pengawalan Mampatan Blok Flex dalam CSS

Secara lalai, semua elemen akan dikurangkan secara berkadar dengan lebar elemen. Walau bagaimanapun, kita boleh membuat sesetengah elemen dikurangkan lebih banyak atau kurang. Untuk ini, terdapat sifat khas flex-shrink.

Sifat ini mewakili sejenis berat, yang akan didarabkan dengan lebar elemen apabila mengira jumlah yang perlu dikurangkan menggunakan formula yang telah disebut di atas. Sebagai contoh, jika lebar elemen ialah 200px, dan flex-shrink-nya ialah 3, maka lebar berwajaran (iaitu didarab dengan berat) elemen akan menjadi:

200px * 3 = 600px

Formula dengan mengambil kira flex-shrink akan kelihatan seperti berikut: ruang kosong negatif * (lebar berwajaran elemen / jumlah semua lebar berwajaran elemen).

Mari kita lihat contoh. Katakan kita mempunyai 4 elemen. Katakan lebar elemen pertama ialah 400px, dan flex-shrink-nya ialah 2, lebar elemen-elemen lain - 200px, dan flex-shrink mereka ialah 1. Katakan lebar elemen induk 900px.

Jumlah lebar semua elemen ialah:

400px + 3 * 200px = 1000px

Ruang kosong negatif akan menjadi:

1000px - 900px = 100px

Jumlah lebar berwajaran semua elemen ialah:

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

Lebar berwajaran elemen pertama ialah:

400px * 2 = 800px

Jumlah yang akan dikurangkan dari elemen pertama ialah:

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

Lebar elemen akan menjadi:

400px - 57.14px = 342.86px ~ 343px

Lebar berwajaran setiap elemen lain ialah:

200px * 1 = 200px

Jumlah yang akan dikurangkan dari setiap elemen ialah:

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

Lebar elemen akan menjadi:

200px - 14.2px = 185.8px ~ 186px

Laksanakan blok yang diterangkan dan sahkan dengan pengukuran, bahawa lebar elemen memang sama dengan yang kita kira.

Kira lebar blok, kemudian sahkan pengiraan dengan pengukuran:

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

Kira lebar blok, kemudian sahkan pengiraan dengan pengukuran:

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

Kira lebar blok, kemudian sahkan pengiraan dengan pengukuran:

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