Sifat flex-shrink

Sifat flex-shrink menentukan tahap blok flex akan mengecut relatif kepada elemen jiran di dalam bekas flex apabila ruang bebas tidak mencukupi.

Sebagai contoh, jika semua blok flex di dalam bekas flex mempunyai flex-shrink:1, maka mereka akan bersaiz sama. Jika salah satu daripadanya mempunyai flex-shrink:2, maka ia akan menjadi 2 kali lebih kecil daripada yang lain.

Berkenaan untuk: blok flex tertentu.

Sifat ini merupakan sebahagian daripada sifat singkatan flex.

Sintaks

selector {
	flex-shrink: nombor positif;
}

Nilai lalai: 1.

Contoh

Katakan kita mempunyai 3 elemen. Lebar setiap satu daripadanya ialah 200px dan jumlahnya ialah 600px, iaitu lebih besar daripada lebar bekas induk, yang bersamaan 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

Mari kita kira ruang bebas negatif menggunakan formula:

600px - 350px = 250px

Jumlah lebar berwajaran elemen mengambil kira nilai sifat flex-shrink bagi setiap elemen akan bersamaan:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Sekarang tentukan berapa banyak elemen pertama akan mengecut:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Elemen kedua:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Elemen ketiga:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Jadi, elemen ketiga, yang nilai flex-shrinknya ialah 3 akan mengecut lebih banyak daripada elemen lain.

Lihat juga

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat justify-content,
yang menetapkan penjajaran sepanjang paksi utama
sifat align-items,
yang menetapkan penjajaran sepanjang paksi silang
sifat flex-wrap,
yang menetapkan kepelbagaian baris blok flex
sifat flex-flow,
singkatan untuk flex-direction dan flex-wrap
sifat order,
yang menetapkan susunan blok flex
sifat align-self,
yang menetapkan penjajaran satu blok
sifat flex-basis,
yang menetapkan saiz blok flex tertentu
sifat flex-grow,
yang menetapkan ketamakan blok flex
sifat flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis