Faktor Kemampatan Blok Fleksibel dalam CSS

Dalam pelajaran sebelumnya, kita telah mengetahui bahawa, apabila elemen fleksibel kekurangan ruang, mereka mula menguncup. Jumlah lebar yang melebihi lebar induk dipanggil ruang negatif percuma.

Dari segi teknikal, mampatan bermaksud sebahagian lebar setiap elemen dipotong supaya semua elemen muat ke dalam induknya.

Mari kita buat beberapa pengiraan. Katakan, sebagai contoh, kita mempunyai 4 elemen dengan lebar 200px. Katakan lebar induk ialah 700px. Ini bermakna jumlah lebar elemen ialah:

200px * 4 = 800px

Lebar ini adalah 100px lebih besar daripada lebar induk. Mari kita kira berapa banyak yang perlu dipotong dari setiap elemen supaya elemen muat ke dalam induknya:

100px / 4 = 25px

Iaitu, lebar elemen akan menjadi:

200px - 25px = 175px

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

Kira lebar blok, dan 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}