Flexbox adalah cara CSS menjajarkan beberapa elemen dalam satu baris atau satu kolom, lalu mengatur jarak di antara mereka. Kamu menyalakannya di elemen pembungkus (induk), dan semua anaknya langsung ikut berjajar. Ini cara paling gampang buat bikin navbar, deretan tombol, atau kotak yang rata tengah.
🧪 Tebakan cepat:
display: flexsebaiknya dipasang di kotak pembungkusnya atau di tiap kotak kecil di dalamnya? Tebak dulu, jawabannya ada di bagian "Tiga kotak dalam satu baris".
Tiga kotak dalam satu baris
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
.containeradalah induknya, kotak yang membungkus ketiga.box. Flexbox selalu dipasang di induk, bukan di anaknya. Itu jawaban tebakannya.display: flex;menyalakan Flexbox. Anak-anaknya (disebut flex item) langsung berjajar.flex-direction: row;bikin mereka berjajar mendatar, dari kiri ke kanan. Ini nilai bawaan, jadi boleh gak ditulis.justify-content: center;mengumpulkan barisan kotaknya di tengah.
Hasilnya, kotak 1, 2, dan 3 berjajar mendatar di tengah halaman. Tanpa display: flex, ketiganya bertumpuk dari atas ke bawah, karena <div> biasa selalu mulai di baris baru.
Kalau di <style> belum ada aturan buat induknya, bikin aturan baru, misalnya di bawah aturan .box. Kalau sudah ada, tambahkan barisnya di dalam aturan itu.
Sumbu utama: arah tusuk sate
Bayangin sate: semua potongan daging berjajar di sepanjang satu tusuk. Flexbox juga begitu, item-itemnya berjajar di sepanjang satu garis. Arah garis itu disebut sumbu utama (main axis), dan flex-direction yang menentukan arahnya:
row(bawaan): tusuknya mendatar, item berjajar dari kiri ke kanan.column: tusuknya tegak, item bertumpuk dari atas ke bawah.row-reversedancolumn-reverse: sama, tapi urutannya dibalik.
Arah yang tegak lurus dengan tusuknya disebut sumbu silang (cross axis).
justify-content: atur posisi di sepanjang tusuk
justify-content mengatur letak item di sepanjang sumbu utama:
flex-start(bawaan): semua kumpul di awal.flex-end: semua kumpul di akhir.center: semua kumpul di tengah.space-between: item pertama nempel di ujung awal, item terakhir nempel di ujung akhir, dan sisa ruangnya dibagi rata di antara mereka. Gak ada ruang di tepi. Pas buat navbar: logo di kiri, menu di kanan.space-arounddanspace-evenly: jaraknya dibagi rata, dengan ruang di tepi juga.
Buat sumbu silang, pasangannya align-items, misalnya align-items: center buat rata tengah dari atas ke bawah.
⚠️ Jebakan yang sering ketemu
display: flexdi anaknya. Kalau dipasang di.box, kotak-kotaknya gak berjajar. Pasang di induknya.- Saklar yang salah. Yang menyalakan Flexbox cuma
display: flex.flex: truedanlayout: flexgak ada, danflex: 1itu properti lain buat anaknya. - Tanda minus yang hilang.
space betweenataujustify contentdiabaikan browser. Tulisspace-betweendanjustify-content.
TL;DR: Pasang display: flex di induk, dan anak-anaknya berjajar di sepanjang sumbu utama, kayak sate di tusuknya. flex-direction menentukan arah tusuknya: row (bawaan, mendatar) atau column (tegak). justify-content mengatur letak item di sepanjang tusuk: center buat tengah, space-between buat menempelkan yang pertama dan terakhir ke kedua ujung.
