Pengaturan Kompresi Blok Flex dalam CSS

Secara default, semua elemen akan dikompresi secara proporsional sesuai lebar elemen. Namun, kita dapat membuat beberapa elemen diambil porsi lebih besar atau lebih kecil. Untuk ini terdapat properti khusus flex-shrink.

Properti ini merupakan suatu bobot, yang akan mengalikan lebar elemen saat menghitung porsi yang diambil berdasarkan rumus yang telah disebutkan di atas. Misalnya, jika lebar elemen adalah 200px, dan flex-shrink-nya adalah 3, maka lebar terbobot (yaitu dikalikan dengan bobot) elemen akan menjadi:

200px * 3 = 600px

Rumus dengan mempertimbangkan flex-shrink akan terlihat seperti ini: spasi negatif * (lebar terbobot elemen / jumlah semua lebar terbobot elemen).

Mari kita lihat contoh. Misalkan kita memiliki 4 elemen. Misalkan lebar elemen pertama adalah 400px, dan flex-shrink-nya adalah 2, lebar elemen lainnya - 200px, dan flex-shrink mereka adalah 1. Misalkan lebar parent 900px.

Total lebar elemen adalah:

400px + 3 * 200px = 1000px

Spasi bebas negatif akan menjadi:

1000px - 900px = 100px

Total lebar terbobot elemen adalah:

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

Lebar terbobot elemen pertama adalah:

400px * 2 = 800px

Elemen pertama akan dikurangi sebesar:

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

Lebar elemen akan menjadi:

400px - 57.14px = 342.86px ~ 343px

Lebar terbobot setiap elemen lainnya adalah:

200px * 1 = 200px

Setiap elemen akan dikurangi sebesar:

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

Lebar elemen akan menjadi:

200px - 14.2px = 185.8px ~ 186px

Implementasikan blok yang dijelaskan dan periksa dengan pengukuran, apakah lebar elemen memang sama seperti 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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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