Panduan Flexbox

Flexbox adalah tool layout yang paling sering kamu buka ulang. Konsepnya sendiri sudah stabil, tetapi nama property-nya mudah tertukar: justify-content untuk sumbu utama, align-items untuk sumbu silang, dan gap untuk keduanya. Chapter ini menyusun referensi flexbox terbaik ke dalam satu daftar, lengkap dengan urutan memakainya saat kamu terjebak pada layout yang tidak rapi.

Empat Referensi Flexbox Utama #

Sumber	URL	Paling baik untuk
MDN Flexbox Guide	developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout	Konsep sumbu utama, sumbu silang, dan istilah resminya
web.dev Learn CSS: Flexbox	web.dev/learn/css/flexbox	Penjelasan visual dengan ilustrasi untuk tiap property
CSS-Tricks Complete Guide	css-tricks.com/snippets/css/a-guide-to-flexbox	Cheat sheet satu halaman dengan diagram panah
Flexbox Froggy	flexboxfroggy.com	Latihan berbentuk game untuk melatih intuisi property

Karena keempatnya mengajarkan topik yang sama, cukup pilih sesuai situasi. Ketika lupa istilah, buka MDN. Ketika lupa pola penggunaan, buka cheat sheet CSS-Tricks. Ketika ingin mengasah intuisi kembali, mainkan Flexbox Froggy selama sepuluh menit.

Gejala Umum dan Property yang Perlu Diperiksa #

Sebagian besar masalah flexbox berasal dari property yang tertukar. Tabel berikut memetakan gejala yang paling sering muncul ke property yang perlu dicek:

Gejala	Property yang perlu diperiksa
Item menempel tanpa jarak	`gap` pada elemen induk
Item tidak sejajar vertikal	`align-items`
Ruang terdistribusi aneh	`justify-content` dan `flex-direction`
Item menyusut saat layar sempit	`flex-shrink` atau `flex-wrap`
Satu item ingin lebih besar	`flex-grow` pada item tersebut

Tips tambahan saat debugging: Firefox Developer Tools menyediakan inspector flexbox yang menggambar sumbu utama dan sumbu silang langsung di atas halaman. Alat serupa tersedia pada DevTools browser Chromium, sehingga kamu bisa melihat arah sumbu tanpa menebak.

Urutan Mendiagnosis Layout Flexbox #

Ketika item flexbox tidak menempati ruang sebagaimana harapan, periksa empat hal ini secara berurutan:

Pastikan induknya sudah display: flex; tanpa itu, seluruh property flexbox diabaikan.
Tentukan arah flex-direction, karena sumbu utama mengikutinya.
Atur justify-content untuk sumbu utama dan align-items untuk sumbu silang.
Gunakan gap untuk jarak antar item, bukan margin pada anak.

css
/* Pola dasar baris komponen yang rapi */
.baris-aksi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

Demo berikut menjalankan pola di atas dengan dua kelompok tombol:

Membaca Halaman Referensi Flexbox #

Halaman MDN Flexbox Guide berperan sebagai indeks: halaman konsep di depan, lalu halaman referensi tiap property. Saat membuka halaman property seperti justify-content, fokuskan pembacaan pada diagram sumbu di bagian atas dan tabel nilai di bagian Formal syntax. Diagram tersebut menjelaskan mengapa nilai seperti space-between berperilaku berbeda pada flex-direction: column.

Ringkasan #

MDN menyediakan fondasi konsep, web.dev memberi ilustrasi, CSS-Tricks menjadi cheat sheet harian, dan Flexbox Froggy melatih intuisi lewat game. Dengan urutan diagnosis empat langkah di atas, hampir semua masalah layout flexbox dapat ditemukan penyebabnya dalam hitungan menit. Chapter berikutnya melanjutkan pola ini ke layout dua dimensi: CSS Grid.