Belajar CSS Flexbox untuk layout web paling cepat lewat praktik langsung, bukan menghafal properti. Flexbox mengatur elemen di dalam satu baris atau kolom, lalu membagi ruang di antaranya secara otomatis. Tujuh langkah di bawah ini disusun berurutan supaya kamu membangun pemahaman dari container sampai perilaku item di dalamnya.
1. Pahami dulu perbedaan container dan item
Semua properti flexbox terbagi dua kelompok: yang ditulis pada flex container dan yang ditulis pada flex item. Kamu menandai container dengan display: flex, dan sejak saat itu setiap anak langsungnya otomatis menjadi flex item.
<div class="baris">
<div class="kotak">Satu</div>
<div class="kotak">Dua</div>
<div class="kotak">Tiga</div>
</div>.baris {
display: flex;
}Perhatikan kata “langsung”. Anak dari anak tidak ikut terpengaruh, jadi kalau kamu menempelkan flex pada elemen yang salah, hasilnya tidak berubah sama sekali. Cek struktur HTML sebelum menyalahkan CSS-nya.
2. Tentukan arah dengan flex-direction
Secara bawaan, item berbaris horizontal dari kiri ke kanan. Properti flex-direction mengubah arah itu, dan pemahaman soal arah ini menentukan properti berikutnya masuk akal atau tidak.
row(bawaan): item berbaris horizontal, sumbu utama mendatar.column: item menumpuk vertikal, sumbu utama tegak.row-reversedancolumn-reverse: sama seperti di atas, hanya urutannya dibalik.
Istilah main axis (sumbu utama) mengikuti arah ini, sedangkan cross axis tegak lurus terhadapnya. Dua properti perataan di langkah berikutnya bekerja pada sumbu yang berbeda, dan arah inilah yang menentukan mana yang mana.
3. Atur jarak dan perataan di sumbu utama
Properti justify-content mengatur bagaimana sisa ruang dibagikan pada sumbu utama. Ini yang sering dipakai untuk mendorong tombol ke kanan atau memberi jarak antar kartu.
.baris {
display: flex;
justify-content: space-between;
gap: 16px;
}Nilai yang paling sering berguna: flex-start, center, space-between, dan space-around. Untuk jarak antar item, pakai gap alih-alih margin. gap hanya menambah jarak di antara item, tidak menempelkan margin di sisi terluar, sehingga lebar container tetap rapi.
4. Pusatkan item di sumbu silang dengan align-items
Kalau justify-content bekerja mendatar pada arah row, align-items bekerja vertikal. Kombinasi keduanya adalah cara paling singkat memusatkan elemen di tengah container.
.kotak-tengah {
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
}Tambahkan min-height, karena tanpa tinggi yang jelas container hanya setinggi isinya dan pemusatan vertikalnya tidak terlihat. Kalau butuh perataan berbeda untuk satu item tertentu, tulis align-self pada item itu.
5. Seimbangkan lebar item dengan flex-grow dan flex-shrink
Tiga properti pada item, yaitu flex-grow, flex-shrink, dan flex-basis, mengatur bagaimana item berbagi ruang. Kamu bisa menyingkatnya dengan properti flex.
flex-grow: 1membuat item ikut mengambil ruang kosong yang tersisa.flex-shrink: 0mencegah item menyusut saat ruang sempit, berguna untuk ikon atau tombol.flex-basismenetapkan ukuran awal sebelum ruang dibagi.
Pola yang praktis: flex: 1 untuk kolom konten yang boleh melebar, dan flex: 0 0 auto untuk elemen yang ukurannya tetap. Menulis flex: 1 jauh lebih ringkas daripada menulis ketiga propertinya satu per satu.
6. Biarkan item turun baris dengan flex-wrap
Secara bawaan, semua item dipaksa berada di satu baris dan akan menyusut sampai sulit dibaca di layar kecil. flex-wrap: wrap mengizinkan item pindah ke baris berikutnya saat ruang tidak cukup.
.galeri {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.galeri .kartu {
flex: 1 1 220px;
}Dengan flex: 1 1 220px, setiap kartu idealnya selebar 220 piksel, boleh melebar, dan boleh menyusut sebelum turun baris. Hasilnya grid sederhana yang menyesuaikan lebar layar tanpa media query tambahan.
Kalau kebutuhanmu mulai melibatkan baris dan kolom yang keduanya eksplisit, pendekatan dua dimensi lebih tepat. Perbandingan lengkap cara membangunnya ada di panduan layout responsive dengan CSS Grid, yang bisa kamu baca setelah flexbox terasa nyaman.
7. Latih dengan komponen nyata
Properti flexbox baru menempel kalau dipakai pada kasus yang benar-benar muncul saat membangun halaman. Coba bangun tiga komponen berikut tanpa framework apa pun.
- Navbar dengan logo di kiri dan menu di kanan, memakai
justify-content: space-between. - Deretan kartu artikel yang turun baris otomatis, memakai
flex-wrapdanflex-basis. - Baris media dengan gambar di kiri dan teks di kanan, memakai
flex-shrink: 0pada gambar.
Setiap selesai membangun satu komponen, perkecil lebar jendela browser perlahan. Perhatikan item mana yang menyusut lebih dulu, lalu sesuaikan nilai flex sampai perilakunya masuk akal. Cara ini melatih intuisi jauh lebih cepat daripada membaca daftar nilai properti.
Kapan sebaiknya tidak memakai Flexbox
Flexbox dirancang untuk menyusun item pada satu dimensi: satu baris atau satu kolom. Begitu kamu butuh mengatur baris dan kolom sekaligus dengan ukuran yang saling bergantung, CSS Grid lebih cocok. Banyak layout produksi justru memakai keduanya, Grid untuk kerangka halaman dan Flexbox untuk isi di dalam tiap bagian.
Untuk hal-hal kecil seperti meratakan ikon dengan teks di dalam tombol, flexbox tetap pilihan paling ringkas. Mulai saja dari situ, lalu naik ke layout yang lebih besar setelahnya.
Pertanyaan yang Sering Diajukan
Apakah flexbox sudah didukung semua browser modern?
Ya, flexbox didukung luas oleh browser versi terkini, termasuk Chrome, Firefox, Safari, dan Edge. Untuk proyek yang masih menyasar browser sangat lama, cek kebutuhan proyekmu sebelum memakai fitur yang lebih baru seperti gap pada flex container.
Apa bedanya justify-content dan align-items?
justify-content mengatur perataan pada sumbu utama, sedangkan align-items mengatur perataan pada sumbu silang yang tegak lurus terhadapnya. Arah kedua sumbu berubah kalau kamu mengubah flex-direction, jadi pastikan arahnya sudah benar sebelum menebak properti mana yang harus diubah.
Kapan pakai gap dan kapan pakai margin?
Pakai gap untuk jarak antar item di dalam flex container karena nilainya tidak menambah ruang di sisi terluar. Margin tetap berguna saat kamu perlu jarak antara dua blok yang tidak berada dalam satu container yang sama, misalnya memberi jarak antar section halaman.
