Masalah Grid Fleksibel dalam CSS

Masalah pertama grid sebenarnya agak jelas - sangat tidak menyenangkan kerana induk perlu menetapkan ketinggian secara eksplisit. Lagipun, situasi mungkin berlaku di mana bilangan blok akan berubah secara dinamik dan kuantitinya kadangkala kurang, kadangkala lebih daripada 9.

Dan masalah kedua akan timbul jika bilangan blok adalah sedemikian rupa sehingga baris terakhir tidak mempunyai blok yang mencukupi. Dalam kes ini, baris terakhir akan kelihatan teruk:

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

Ternyata bahawa secara mendatar, nilai space-between juga tidak berfungsi dengan baik dalam kes kami.

Kesimpulan: jika bilangan anak anda sentiasa malar dan muat dengan baik dalam induk, maka grid menggunakan space-between adalah sesuatu yang agak mudah. Jika tidak, kita perlu memikirkan sesuatu yang lain.

Diberi 12 elemen. Buat grid daripadanya dengan 4 elemen sebaris dengan lebar setiap elemen 100px dan jarak antara mereka 20px.

Diberi 12 elemen. Buat grid daripadanya dengan 3 elemen sebaris dengan lebar setiap elemen 150px dan jarak antara mereka 10px.