Grid Fleksibel dalam CSS

Mari kita belajar cara membuat grid fleksibel menggunakan flexbox. Pertama, mari susun blok-flex dalam beberapa baris, dengan tiga blok setiap baris.

Untuk melakukan ini, tetapkan lebar kepada elemen induk flex kepada 300px dan flex-wrap kepada nilai wrap, dan lebar 100px kepada elemen anak:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Sekarang mari kita buat jarak antara blok kami secara mendatar. Untuk melakukan ini, tingkatkan lebar elemen induk untuk memberikan ruang tambahan untuk jarak.

Oleh kerana kami mempunyai tiga blok dalam satu baris, ini bermakna terdapat dua celah di antara mereka. Katakan kita mahu setiap celah mempunyai lebar 10px. Ini bermakna lebar elemen induk perlu ditingkatkan sebanyak 20px, iaitu menjadikannya bukan 300px, tetapi 320px.

Sekarang mari kita tetapkan justify-content kepada elemen induk blok kepada nilai space-between dan dapatkan jarak yang diinginkan antara blok:

<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 class="child">9</div>
</div>

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

Sekarang mari kita tambahkan jarak yang sama antara blok secara menegak. Untuk melakukan ini, anda boleh menetapkan sifat align-content kepada nilai space-between.

Walau bagaimanapun, untuk melakukan ini, anda perlu menetapkan ketinggian kepada elemen induk, kerana align-content tidak akan berfungsi. Mari kita tetapkan ketinggian kepada 320px. Dalam kes ini, kami akan mempunyai ruang untuk tiga baris blok dengan ketinggian 100px ditambah dua jarak antara baris sebanyak 10px.

Mari kita jalankan:

<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 class="child">9</div>
</div>

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

Semuanya berfungsi dengan baik, tetapi terdapat beberapa masalah yang akan kita bincangkan dalam pelajaran seterusnya.