Memilih Flexbox

Section ini kita tutup dengan pertanyaan yang justru sering jadi awal segala pekerjaan layout: kapan flexbox adalah alat yang tepat? Jawabannya berangkat dari satu kalimat kunci — flexbox adalah alat layout satu dimensi. Flexbox menyusun item dalam satu baris ATAU satu kolom pada satu waktu; ia tidak dirancang untuk mengatur baris dan kolom sekaligus. Chapter ini memberi kita kerangka keputusan cepat, memetakan komponen umum ke alat yang cocok, dan menyiapkan jembatan menuju section berikutnya: CSS Grid.

Pertanyaan Kunci: Satu Sumbu atau Dua #

Sebelum menulis satu deklarasi pun, periksa kebutuhan layout kita:

• Satu sumbu: item disusun mendatar atau menumpuk vertikal, dan keputusan tinggal di main axis serta cross axis. Flexbox adalah jawabannya — cepat, fleksibel, dan seluruh section ini telah membuktikannya.
• Dua sumbu: item harus berjajar dalam baris DAN kolom secara bersamaan, dengan celah yang lurus di kedua arah. Di sinilah CSS Grid lebih pas — layout dua dimensi memang wilayahnya, dan section CSS Grid setelah ini membahasnya tuntas.

Banyak komponen tampak “dua dimensi” padahal bukan. Deretan kartu yang bisa melipat baris, misalnya, tetap satu dimensi pada setiap barisnya — dan kita sudah membangunnya dengan flexbox pada chapter sebelumnya.

Daftar Cek: Kapan Flexbox Pas #

Pola-pola berikut adalah wilayah terbaik flexbox:

• Navigasi dan toolbar: brand, menu, dan tombol dalam satu baris, dengan dorongan margin-left: auto untuk item ujung.
• Media object: avatar di samping blok teks — pola komentar dan pesan yang akan kita lihat di demo chapter ini.
• Baris formulir: label dan input berdampingan atau bertumpuk dalam satu kelompok.
• Menengahkan satu elemen: justify-content dan align-items menengahkan tanpa perhitungan, baik satu sumbu maupun dua.
• Bagian dalam komponen: header, isi, dan footer kartu — persis seperti kartu produk pada chapter sebelumnya.
• Item yang harus berbagi ruang: flex-grow dan flex-shrink membagi ruang sisa maupun beban penyusutan secara proporsional.

Media object — avatar di kiri, blok teks di kanan — adalah pola flexbox paling kanonik dan menjadi fondasi kolom komentar, daftar pesan, hingga daftar notifikasi:

Tiga keputusan flexbox bekerja di demo ini: flex-shrink: 0 menjaga avatar tidak menyusut, gap: 12px mengatur jaraknya dari teks, dan align-items: flex-start menempelkan avatar ke baris pertama nama alih-alih menengahkannya. Ganti nilai terakhir menjadi center di DevTools dan rasakan perbedaannya.

Kapan Beralih ke Grid #

Sebaliknya, kebutuhan-kebutuhan berikut menunjuk ke CSS Grid:

• Galeri atau katalog yang sel-selnya harus lurus dalam baris dan kolom sekaligus, dengan lebar trek yang konsisten.
• Kerangka halaman utuh: header, sidebar, konten, dan footer yang menempati area-area tetap.
• Layout yang butuh perataan dua arah sekaligus: kolom-kolom harus sejajar vertikal dan baris-baris sejajar horizontal pada titik yang sama.

Aturan praktisnya: bila kita mendapati diri menumpuk beberapa container flex hanya demi meniru kolom-kolom yang lurus, itu sinyal kuat bahwa grid adalah alat yang lebih jujur.

Tabel Keputusan Cepat #

Menggabungkan Keduanya Itu Normal #

Keputusan ini bukan pilihan eksklusif — proyek sungguhan memakai keduanya sekaligus, dan itu praktik yang sehat. Grid membangun kerangka halaman, lalu flexbox merapikan bagian dalam tiap area. Struktur tipikalnya bisa digambarkan seperti ini:

Halaman
├── Kerangka halaman  → CSS Grid (header, sidebar, konten, footer)
└── Di dalam tiap area → Flexbox
    ├── Navbar pada header      : baris (brand, menu, keranjang)
    ├── Konten utama            : deretan kartu (container baris)
    │   └── Tiap kartu          : kolom (gambar, isi, aksi)
    └── Footer                  : baris (tautan, hak cipta)

Bacaannya dari luar ke dalam: grid menentukan di mana setiap area berada, flexbox menentukan bagaimana isi tiap area tersusun. Dua alat itu saling melengkapi, bukan saling menggantikan.

Ringkasan #

Flexbox adalah alat layout satu dimensi: ia unggul untuk navigasi, media object, baris formulir, penengahan, dan bagian dalam komponen — sementara kebutuhan dua dimensi seperti katalog multi-baris dan kerangka halaman menunjuk ke CSS Grid. Keduanya dipakai berdampingan di proyek nyata: grid untuk kerangka, flexbox untuk isi. Dengan kerangka keputusan ini, section Flexbox resmi kita selesaikan — section berikutnya membuka dunia layout dua dimensi itu: CSS Grid.