Membangun website dengan tema modern dan responsif, maka kita perlu memanfaatkan salah satu fitur pada CSS yaitu Flexible Box atau lebih dikenal dengan Flexbox. Dengan Flexbox, kita bisa membuat layout website yang responsif dan menyusun elemen dengan rapi. Pada artikel ini, kita akan membahas dasar-dasar Flexbox, pengertian dari Flexbox, dan contoh penggunaan Flexbox.

Apa itu CSS Flexbox?

CSS Flexbox adalah metode layout satu dimensi yang memungkinkan kita mengatur elemen-elemen dalam container secara horizontal (row) atau vertikal (column). Keuntungan dari memakai fitur Flexbox diantaranya adalah:

Membuat layout responsif tanpa media query yang kompleks.
Mengatur posisi elemen dengan fleksibel dan mudah.
Mengurangai ketergantungan pada media query.
Mendukung nested layout
Memudahkan re-ordering elemen tanpa mengubah struktur HTML.

Mengapa Kita Butuh Flexbox?

Sebelum adanya fitur Flexbox pada CSS, membuat layout yang responsif merupakan tantangan besar bagi Website Developer. Para developer harus menggunakan kombinasi seperti float, clear, dan positioning css yang kompleks hanya untuk mengatur posisi elemen agar terlihat rapi dan responsif.

Sebelumnnya, kita telah membahas secara lengkap mengenai CSS Positioning, termasuk jenis-jenisnya seperti relative, static, absolute, dan fixed. Pelajari penggunaanya lebih dalam, silahkan pelajari pada artikel berikut: Belajar CSS Positioning: Static, Relative, Absolute & Fixed untuk Pemula.

Konsep Dasar Flexbox

Untuk menggunakan Flexbox, kamu hanya perlu menambahkan properi display{text-red} pada elemen container atau parent element. Contohnya seperti dibawah ini.

.container {
 display: flex;
}

Setelah menambahkan display: flex; pada container elemen, semua child element di dalamnya akan secara otomatis menjadi flex items. Secara default, item yang berada di dalam Flexbox Container akan tersusun secara horizontal (dari kiri ke kanan). Flexbox bekerja dengan 2 sumbu (axis) yaitu:

Main Axis (horizontal)
Cross Axis (vertikal)

Mengatur Susunan Elemen Dengan Flexbox

Kita dapat mengatur sumbu default dari Flexbox yang awalnya horizontal menjadi vertikal. Cukup menambahkan properti flex-direction pada Flexbox Container kita dapat mengatur flex items akan tampil secara horizontal atau vertikal. Berikut contoh penggunaanya.

<!DOCTYPE>
<html>
	<head>
		<style>
			.container {
			 display: flex;
			 flex-direction: column;
			}
			
			.box {
			  width: 80px;
			  height: 80px;
			  margin: 8px;
			  background-color: crimson;
			}
		</style>
	</head>
	<body>
		<div class"'container">
			<div class="box">Box 1</div>
			<div class="box">Box 2</div>
			<div class="box">Box 3</div>
		</div>
	</body>
</html>

Pada contoh kode di atas, elemen atau flex items yang berada di dalam class container akan tersusun secara vertikal. Jika kita ingin menyusun box secara horizontal, ubah nilai column menjadi row pada properti flex-direction{text-red}.

.container {
 display: flex;
 flex-direction: row;
}

Berikut ini adalah beberapa nilai dari properti flex-direction{text-red} untuk menentukan arah susunan elemen, antara lain:

row elemen akan tersusun horizontal.
row-reverse elemen akan tetap tersusun horizontal, namun dari kanan ke kiri.
column elemen akan tersusun vertikal.
column-reverse elemen akan tersusun secara vertikal, namun dari bawah ke atas.

Mengatur Posisi Elemen (Horizontal) Dengan Flexbox

Untuk mengatur posisi elemen secara horizontal di dalam sebuah Flexbox Container, kita bisa menggunakan properti justify-content. Properti ini sangat berguna ketika kita ingin menentukan penempatan elemen seperti halnya, elemen akan diletakkan di sebelah kiri, tengah, atau tersebar secara merata. Contoh penggunaannya sebagai berikut.

<!DOCTYPE html>
<html>
	<head>
    <title>Learn Flexbox - NganggurDev</title>
		<style>
			.container {
			 width: 40%;
       height: 400px;
			 display: flex;
       background-color: lightblue;
			 justify-content: center; /* centering an element (horizontal) */
			}
			
			.box {
			  width: 80px;
			  height: 80px;
			  margin: 8px;
			  background-color: crimson;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">Box 1</div>
			<div class="box">Box 2</div>
			<div class="box">Box 3</div>
		</div>
	</body>
</html>

Flexbox Vertical Pada contoh di atas, box atau bagian elemen dari Flexbox Container akan berada di tengah container. Kenapa? karena kita menggunakan nilai center pada properti justify-content.

Berikut ini adalah beberapa nilai umum yang bisa kita gunakan pada properti justify-content yaitu:

flex-start menempatkan semua item sejajar di awal baris utama (kiri secara default).
flex-end item akan sejajar di akhir baris utama (kanan secara default).
center item akan diposisikan di tengah container.
space-between item akan menyebar dengan jarak yang sama di antara mereka.
space-evenly membagi ruang container menjadi bagian yang sama persis di antara elemen.

Mengatur Posisi Elemen (Vertikal) Dengan Flexbox

Dengan menggunakan properti align-items, kita dapat mengatur posisi item di dalam sebuah Flexbox Container secara vertikal. align-items mengatur bagaimana semua item dalam satu baris disejajarkan terhadap tinggi atau lebar container dan juga tergantung arah flex (row atau column). Contoh penggunaanya sebagai berikut.

<!DOCTYPE html>
<html>
	<head>
    <title>Learn Flexbox - NganggurDev</title>
		<style>
			.container {
			 width: 40%;
			 height: 400px;
       background-color: lightblue;
			 display: flex;
			 justify-content: center; /* centering an element (horizontal) */
			 align-items: flex-end /* making an element appear at the end vertically */
			}
			
			.box {
			  width: 80px;
			  height: 80px;
			  margin: 8px;
			  background-color: crimson;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">Box 1</div>
			<div class="box">Box 2</div>
			<div class="box">Box 3</div>
		</div>
	</body>
</html>

Flexbox Vertical Pada contoh kode diatas, elemen box akan berada tepat di tengah secara horizontal karena menggunakan properti justify-content: center;. Sementara itu, posisi vertikal akan berada di bagian bawah container karena menggunakan properti align-items: flex-end;.

Berikut ini adalah beberapa nilai umum yang bisa kita gunakan pada properti align-items yaitu:

flex-start item akan di posisikan ke atas container (row direction).
flex-end item akan di posisikan ke bawah container (row direction).
center item akan diletakkan di tengah secara vertikal (row direction).

Kesimpulan

CSS Flexbox adalah fitur yang sangat powerful untuk membuat layout responsif dengan mudah. Dengan memahami konsep dasar, properti, beserta fungsi-fungsinya, kita sudah bisa membuat layout yang fleksibel dan maintainable.

Terimakasih, sampai jumpa di artikel selanjutnya.

Flexbox Layout dalam CSS - Layout Responsif yang Mudah dan Powerful