CSS'te Esnek Kutularda Karo Düzeni Problemleri

Karo düzenindeki ilk problem aslında hemen belli oluyor - ebeveynin açıkça yükseklik belirtmek zorunda olması çok elverişsiz. Sonuçta blok sayısının dinamik olarak değişebileceği ve sayılarının bazen 9'dan az, bazen de fazla olabileceği bir durumla karşılaşmamız oldukça muhtemel.

İkinci problem ise, blok sayısının son sırada yetersiz miktarda blok kalacak şekilde olması durumunda ortaya çıkacak. Bu durumda son sıra berbat görünecek:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Görünen o ki, yatayda space-between değeri bizim durumumuzda iyi çalışmıyor.

Özetle: Eğer alt elemanlarınızın sayısı her zaman sabitse ve ebeveynin içine normal şekilde sığıyorsa, space-between ile karo düzeni oldukça kullanışlı bir şey. Aksi takdirde başka bir çözüm bulmak gerekecek.

12 eleman verilmiştir. Bunlardan her biri 100px genişliğinde ve aralarında 20px mesafe olacak şekilde satırda 4 elemanlı bir karo düzeni oluşturun.

12 eleman verilmiştir. Bunlardan her biri 150px genişliğinde ve aralarında 10px mesafe olacak şekilde satırda 3 elemanlı bir karo düzeni oluşturun.