CSS'te Esnek Kutu Sıkıştırma Düzenleme

Varsayılan olarak, tüm öğelerden genişlikleriyle orantılı parçalar koparılır. Ancak, bazı öğelerden daha büyük veya daha küçük parçaların koparılmasını sağlayabilirsiniz. Bunun için flex-shrink adlı özel bir özellik vardır.

Bu özellik, daha önce verilen formüle göre koparılacak parçanın hesaplanmasında öğenin genişliği ile çarpılacak bir ağırlığı temsil eder. Örneğin, bir öğenin genişliği 200px ve flex-shrink değeri 3 ise, öğenin ağırlıklandırılmış (yani ağırlıkla çarpılmış) genişliği şu şekilde olur:

200px * 3 = 600px

flex-shrink dikkate alındığında formül şu şekilde olacaktır: neg. serbest alan * (öğenin ağırlıklandırılmış genişliği / tüm öğelerin ağırlıklandırılmış genişlikleri toplamı).

Bir örnek üzerinden gidelim. Diyelim ki 4 öğemiz var. İlk öğenin genişliği 400px ve flex-shrink değeri 2 olsun, diğer öğelerin genişliği - 200px ve onların flex-shrink değeri 1 olsun. Ebeveynin genişliği 900px olsun.

Öğelerin toplam genişliği:

400px + 3 * 200px = 1000px

Negatif serbest alan şöyle olacaktır:

1000px - 900px = 100px

Öğelerin toplam ağırlıklandırılmış genişliği:

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

İlk öğenin ağırlıklandırılmış genişliği:

400px * 2 = 800px

İlk öğeden şu kadar parça koparılacak:

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

Öğenin genişliği şöyle olacaktır:

400px - 57.14px = 342.86px ~ 343px

Diğer öğelerin her birinin ağırlıklandırılmış genişliği şöyledir:

200px * 1 = 200px

Her bir öğeden şu kadar parça koparılacak:

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

Öğenin genişliği şöyle olacaktır:

200px - 14.2px = 185.8px ~ 186px

Açıklanan blokları uygulayın ve ölçüm yaparak öğelerin genişliklerinin gerçekten hesapladığımız gibi olduğunu kontrol edin.

Blokların genişliklerini hesaplayın ve ardından hesaplamaları ölçümle kontrol edin:

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

Blokların genişliklerini hesaplayın ve ardından hesaplamaları ölçümle kontrol edin:

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

Blokların genişliklerini hesaplayın ve ardından hesaplamaları ölçümle kontrol edin:

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