CSS'te Esnek Blokların Sıkıştırılabilirlik Faktörü

Önceki derste, esnek elemanlara yer yetmediğinde sıkışmaya başladıklarını öğrenmiştik. Toplam genişliğin ebeveyn genişliğinden ne kadar fazla olduğuna negatif serbest alan denir.

Teknik olarak sıkıştırma, her elemanın genişliğinden, tüm elemanların ebeveynlerine sığması için bir miktar genişliğin kesilmesi anlamına gelir.

Hadi bir hesaplama yapalım. Örneğin, genişliği 200px olan 4 elemanımız olduğunu varsayalım. Ebeveynin genişliğinin 700px olduğunu varsayalım. Bu durumda elemanların toplam genişliği:

200px * 4 = 800px

Bu genişlik, ebeveynin genişliğinden 100px daha fazladır. Hadi, elemanların ebeveynlerine sığması için her elemandan ne kadar kesilmesi gerektiğini hesaplayalım:

100px / 4 = 25px

Yani elemanların genişliği şöyle olacaktır:

200px - 25px = 175px

Açıklanan blokları uygulayın ve elemanların genişliğinin gerçekten hesapladığımız gibi olduğunu ölçümleyerek kontrol edin.

Blokların genişliğini hesaplayın ve ardından hesapları ölçümleyerek 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}