Faktor Kompresibilitas Blok Flex dalam CSS

Dalam pelajaran sebelumnya, kita menemukan bahwa, ketika elemen flex kekurangan ruang, mereka mulai menyusut. Besarnya kelebihan lebar total dibandingkan lebar induk disebut ruang bebas negatif.

Secara teknis, kompresi berarti sepotong lebar dipangkas dari lebar setiap elemen sehingga semua elemen muat di dalam induknya.

Mari kita lakukan beberapa perhitungan. Misalnya, kita memiliki 4 elemen dengan lebar 200px. Misalkan lebar induk adalah 700px. Artinya, total lebar elemen adalah:

200px * 4 = 800px

Lebar ini 100px lebih besar dari lebar induk. Mari kita hitung, berapa yang harus dipangkas dari setiap elemen agar elemen-elemen tersebut muat di dalam induknya:

100px / 4 = 25px

Artinya lebar elemen akan menjadi:

200px - 25px = 175px

Implementasikan blok yang dijelaskan dan periksa dengan pengukuran, apakah lebar elemen benar-benar sama dengan yang kita hitung.

Hitung lebar blok, lalu periksa perhitungan 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;
}