Layout Ubin dengan Flexbox di CSS

Mari sekarang kita belajar membuat layout ubin dengan flexbox. Pertama-tama, mari kita atur blok-flex menjadi beberapa baris, dengan tiga blok per baris.

Untuk melakukan ini, atur lebar parent flex menjadi 300px dan flex-wrap ke nilai wrap, serta atur lebar child menjadi 100px:

<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-blok kita secara horizontal. Untuk melakukan ini, tingkatkan lebar parent untuk memberikan ruang tambahan untuk margin.

Karena kita memiliki tiga blok per baris, berarti ada dua celah di antara mereka. Misalkan kita ingin setiap celah memiliki lebar 10px. Berarti lebar parent perlu ditingkatkan sebesar 20px, yaitu dibuat bukan 300px, melainkan 320px.

Sekarang mari kita atur justify-content pada parent blok ke 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 vertikal. Untuk melakukan ini, kita bisa mengatur properti align-content ke nilai space-between.

Namun, untuk ini perlu mengatur tinggi parent, jika tidak align-content tidak akan bekerja. Mari kita atur tingginya ke 320px. Dalam hal ini, kita bisa menampung tiga baris blok dengan tinggi 100px ditambah dua margin antara baris sebesar 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;
}

Semua bekerja dengan baik, tetapi ada beberapa masalah yang akan kita bahas dalam pelajaran berikutnya.