Belajar CSS - Flexbox untuk Layout Satu Dimensi
Episode ini membahas Flexbox untuk layout satu dimensi: flex container dan flex item, arah utama melalui flex-direction, perataan dengan justify-content dan align-items, serta distribusi ruang via flex-grow, flex-shrink, dan flex-basis.
#Pendahuluan
Episode 5 memperkenalkan display: flex secara singkat. Episode 7 membahasnya tuntas. Flexbox adalah model layout satu dimensi: ia menyusun item dalam satu baris atau satu kolom sekaligus, dengan control penuh atas arah, perataan, dan pembagian ruang.
Sejak dikenalkan, Flexbox menyelesaikan masalah klasik seperti memusatkan elemen secara vertikal yang dulu membutuhkan trik rumit. Hampir semua framework modern memakai Flexbox sebagai fondasi komponen UI.
Mengapa penting? Karena sebagian besar layout nyata — navbar, daftar kartu, tombol aksi, tag — adalah satu dimensi. Menguasai Flexbox berarti kalian memecahkan mayoritas masalah layout harian dengan tiga sampai empat properti.
#Flex Container dan Flex Item
display: flex pada sebuah elemen menjadikannya flex container, dan anak langsungnya otomatis menjadi flex item:
.container {
display: flex;
gap: 16px;
}
.item {
background-color: #2563eb;
color: white;
padding: 16px;
}Saat flex aktif, item-item tersusun sejajar mengikuti main axis (sumbu utama) tanpa perlu float atau inline-block. Properti gap mengatur jarak antar-item — dulu harus memakai margin manual.
#Arah Utama: Flex-Direction
Sumbu utama ditentukan oleh flex-direction. Nilai default adalah row, artinya item tersusun horizontal. Ubah menjadi column untuk menyusun vertikal:
.baris {
flex-direction: row;
}
.kolom {
flex-direction: column;
}
.baris-terbalik {
flex-direction: row-reverse;
}Perhatikan bahwa row-reverse dan column-reverse membalik arah sekaligus urutan visual item. Properti ini adalah cara utama beralih antara layout horizontal dan vertikal tanpa mengubah HTML.
#Perataan: Justify-Content dan Align-Items
Perataan pada sumbu utama memakai justify-content; pada cross axis (sumbu silang) memakai align-items:
.tengah {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.tombol {
justify-content: space-between;
}Kombinasi justify-content: center dan align-items: center adalah cara paling mudah untuk memusatkan elemen dalam kotak. space-between menyebar item dengan jarak sama, menjauhkan item pertama dan terakhir ke tepi.
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}Untuk memusatkan sebuah kartu di tengah halaman, beri container min-height lalu pasang kedua properti di atas.
#Distribusi Ruang: Grow, Shrink, dan Basis
Ketika ruang tidak mencukupi atau berlebih, flex-grow, flex-shrink, dan flex-basis menentukan pembagiannya:
.sidebar {
flex: 1 1 200px;
}
.konten {
flex: 3 1 400px;
}
.logo {
flex: 0 0 auto;
}flex: 1 1 200px berarti: boleh tumbuh dengan bobot 1, boleh menyusut, dan basis awal 200px. Perbandingan bobot 1 dan 3 membuat sidebar dan konten berbagi ruang ekstra dengan rasio 1:3. flex: 0 0 auto mencegah item tumbuh atau menyusut — tepat untuk logo dan ikon.
#Flex-Wrap dan Order
flex-wrap: wrap membuat item turun ke baris berikutnya bila ruang habis. order mengubah urutan visual tanpa mengubah HTML:
.daftar {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.item {
flex: 0 0 180px;
order: 2;
}
.item-pertama {
order: 1;
}Item dengan order lebih kecil muncul lebih dulu. Gunakan order untuk penataan ulang responsif yang ringan, tetapi jangan jadikan alat untuk mengubah hierarki logis dokumen.
#Latihan: Navbar Responsif
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Flexbox</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">DevNull</div>
<ul class="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang</a></li>
</ul>
<button class="cta">Masuk</button>
</nav>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: #0f172a; color: white; }
.menu { display: flex; gap: 24px; list-style: none; margin: 0; }
.menu a { color: white; text-decoration: none; }
.cta { flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 6px; background-color: #2563eb; color: white; }Jalankan npx serve . dan coba ubah lebar jendela. Logo, menu, dan tombol tetap sejajar karena align-items: center, sementara justify-content: space-between menjaga jarak antar ketiganya.
#Kesalahan Umum dan Solusinya
#Align-Items Tidak Berfungsi
Bila align-items tampak diabaikan, cek bahwa tinggi container benar-benar melebihi item. Tanpa ruang ekstra pada cross axis, tidak ada yang bisa dirapikan.
#Shrink Membuat Item Kelecilan
Secara default item flex bisa menyusut. Bila teks terpotong, beri flex-shrink: 0 atau min-width: 0 pada item yang seharusnya mempertahankan ukuran.
#Justify-Content dan Gap Bertabrakan
space-between menciptakan jarak antar-item, dan gap menambah jarak lagi. Pilih salah satu agar jarak tidak ganda secara tak terduga.
#Penutup
Inti yang harus dibawa pulang:
display: flexmengaktifkan layout satu dimensi pada container dan anak-anaknya.flex-directionmenentukan sumbu utama: baris atau kolom.justify-contentmerapikan item pada sumbu utama;align-itemspada sumbu silang.flex-grow,flex-shrink, danflex-basismengontrol distribusi ruang.flex-wrapmemungkinkan item pindah baris;ordermengubah urutan visual.- Kombinasi center dan align-items memusatkan elemen tanpa trik lama. Di episode 8 selanjutnya kita akan membahas CSS Grid untuk layout dua dimensi — membangun baris dan kolom sekaligus untuk layout halaman yang lebih kompleks seperti dashboard dan galeri.