Memahami Flexbox CSS (Contoh Mudah)

Ngerti Flexbox CSS itu salah satu skill yang bakal langsung ngubah cara kamu nyusun halaman web. Dulu, sebelum ada Flexbox, mau naruh beberapa kotak biar berjajar rapi atau pas di tengah aja ribetnya minta ampun—penuh trik aneh kayak float sama margin negatif. Nah, Flexbox datang buat nyelesein satu masalah besar: nata elemen dalam satu dimensi, entah itu satu baris atau satu kolom, dengan cara yang masuk akal.

Flexbox sendiri singkatan dari Flexible Box Layout. Idenya simpel banget: kamu jadiin satu elemen sebagai "wadah" (flex container), terus semua elemen di dalamnya jadi "item" yang posisinya bisa kamu atur dengan gampang. Kalau kamu masih asing sama properti CSS pada umumnya, mending baca dulu belajar CSS dasar untuk pemula biar pembahasan ini kerasa lebih enteng.

Ngaktifin Flexbox

Buat mulai, cukup satu baris di elemen wadah:

.kontainer {
  display: flex;
}

Begitu kamu nulis display: flex, semua elemen anak langsung berjajar dalam satu baris horizontal. Sesederhana itu. Coba bayangin struktur HTML kayak gini:

<div class="kontainer">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
</div>

Tanpa Flexbox, ketiga div itu bakal numpuk ke bawah. Begitu dikasih display: flex, ketiganya langsung berjajar ke samping.

Dua Sumbu yang Wajib Kamu Pahami

Nah, ini konsep paling penting di Flexbox, jadi pelan-pelan aja. Ada dua sumbu: main axis (sumbu utama) sama cross axis (sumbu silang). Secara default, sumbu utama jalan horizontal (kiri ke kanan), dan sumbu silang jalan vertikal.

Properti justify-content ngatur posisi di sepanjang sumbu utama.
Properti align-items ngatur posisi di sepanjang sumbu silang.

Sekali kamu paham dua sumbu ini, sisanya gampang.

Ngatur Jarak pakai justify-content

justify-content nentuin gimana item disebar di sepanjang baris.

.kontainer {
  display: flex;
  justify-content: space-between;
}

Beberapa nilai yang paling sering dipakai:

flex-start — item numpuk di awal (default).
center — item ada di tengah.
space-between — jaraknya merata, item pertama dan terakhir nempel di tepi.
space-around — jaraknya merata termasuk di kedua ujung.

space-between ini kepake banget buat bikin navigasi, misalnya logo di kiri dan menu di kanan.

Nyelarasin pakai align-items

align-items ngatur posisi item secara vertikal (dalam kondisi default).

.kontainer {
  display: flex;
  align-items: center;
  height: 200px;
}

Ini cara paling klasik sekaligus paling bersih buat naruh sesuatu di tengah secara vertikal—hal yang dulu bikin pusing tujuh keliling sebelum era Flexbox.

Naruh Elemen Pas di Tengah

Salah satu kombinasi paling terkenal di CSS modern itu naruh elemen pas di tengah, horizontal dan vertikal sekaligus. Pakai Flexbox, cuma butuh tiga baris.

.kontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

Apa pun isi di dalamnya bakal nangkring pas di tengah wadah. Trik ini bakal kamu pakai berulang kali sepanjang karier, percaya deh.

Ngatur Arah dan Pembungkusan

Secara default item berjajar horizontal, tapi kamu bisa ubah jadi vertikal pakai flex-direction.

.kontainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

Properti gap ngasih jarak antar item dengan rapi tanpa perlu ngatur margin satu-satu. Ada juga flex-wrap: wrap yang bikin item turun ke baris berikutnya kalau ruangnya nggak cukup—kepake banget buat galeri atau daftar kartu.

Ngatur Ukuran Item pakai flex

Properti flex di masing-masing item nentuin seberapa besar dia boleh tumbuh atau nyusut. Nilai flex: 1 bikin item bagi ruang sisa secara merata.

.kotak {
  flex: 1;
}

Kalau ketiga kotak dikasih flex: 1, mereka bakal berbagi lebar wadah sama rata. Ini fondasi buat bikin kolom yang fleksibel.

Flexbox dan Layout Responsif

Flexbox itu pasangan yang pas banget buat desain responsif. Kombinasi flex-wrap sama media query bikin layout nyesuaiin diri otomatis di layar kecil. Kalau kamu pengen ngulik sisi responsifnya lebih dalam, cek apa itu responsive web design buat gambaran lengkapnya.

FAQ

Kapan pakai Flexbox, kapan pakai Grid?

Pakai Flexbox buat layout satu dimensi: satu baris atau satu kolom, kayak navbar atau deretan tombol. Pakai Grid buat layout dua dimensi—baris dan kolom sekaligus—kayak kerangka halaman penuh. Dan seringnya, keduanya malah dipakai bareng.

Apa bedanya justify-content dan align-items?

justify-content kerja di sepanjang sumbu utama (default: horizontal), sedangkan align-items kerja di sumbu silang (default: vertikal). Inget dua sumbu ini biar nggak ketuker.

Apakah Flexbox didukung semua browser?

Iya, tenang aja. Flexbox udah didukung luas sama semua browser modern sejak bertahun-tahun lalu, jadi kamu bisa makainya tanpa was-was.

Penutup

Flexbox ngilangin banyak rasa frustrasi waktu nata halaman, terus gantiin sama beberapa properti yang logis. Kuasai konsep dua sumbu, justify-content, dan align-items, maka separuh kerjaan layout udah kelar. Satu tips praktis terakhir: bikin satu wadah isi tiga kotak, terus coba ganti-ganti nilai justify-content sama align-items satu-satu sambil ngeliat hasilnya. Soalnya belajar Flexbox paling cepet itu lewat eksperimen langsung, bukan cuma baca.

Memahami Flexbox CSS dengan Contoh Sederhana