flex-shrink Özelliği

flex-shrink özelliği, yeterli boş alan olmaması durumunda bir flex bloğunun, flex konteyneri içindeki komşu öğelere kıyasla ne kadar küçüleceğini belirler.

Örneğin, bir flex konteynerinin içindeki tüm flex blokları flex-shrink:1 değerine sahipse, aynı boyutta olacaklardır. Eğer bunlardan biri flex-shrink:2 değerine sahipse, diğerlerinden 2 kat daha küçük olacaktır.

Uygulandığı yer: belirli bir flex bloğu.

Bu özellik, flex kısayol özelliğinin bir parçası olarak yer alır.

Sözdizimi

seçici {
	flex-shrink: pozitif sayı;
}

Varsayılan değer: 1.

Örnek

Elimizde 3 öğe olduğunu varsayalım. Her birinin genişliği 200px ve toplam genişlikleri 600px olup, ebeveyn konteynerinin 350px olan genişliğinden fazladır:

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

Negatif boş alanı şu formülle hesaplayalım:

600px - 350px = 250px

Her bir öğe için flex-shrink özellik değerleri dikkate alındığında, öğelerin ağırlıklı toplam genişliği şöyle olacaktır:

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

Şimdi ilk öğenin ne kadar küçüleceğini belirleyelim:

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

İkinci öğe:

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

Üçüncü öğe:

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

flex-shrink değeri 3 olan üçüncü öğenin diğer öğelerden daha fazla küçüleceği ortaya çıkıyor.

Ayrıca Bakınız

flex blokların eksen yönünü belirleyen flex-direction özelliği
ana eksen boyunca hizalamayı belirleyen justify-content özelliği
çapraz eksen boyunca hizalamayı belirleyen align-items özelliği
flex blokların çok satırlı olup olmayacağını belirleyen flex-wrap özelliği
flex-direction ve flex-wrap için kısayol olan flex-flow özelliği
flex blokların sırasını belirleyen order özelliği
tek bir bloğun hizalamasını belirleyen align-self özelliği
belirli bir flex bloğunun boyutunu belirleyen flex-basis özelliği
flex blokların "büyüme açlığını" belirleyen flex-grow özelliği
flex-grow, flex-shrink ve flex-basis için kısayol olan flex özelliği