Pengenalan Flexbox

Menyusun elemen berdampingan terdengar sederhana, tetapi selama bertahun-tahun CSS tidak menyediakan alat yang memang dirancang untuk itu: kita mengandalkan float, inline-block, dan perhitungan lebar manual yang rapuh. Flexbox (Flexible Box Layout) adalah modul layout yang diciptakan khusus untuk menyusun elemen dalam satu dimensi — mendatar atau menumpuk — lengkap dengan kontrol arah, perataan, jarak, dan pembagian ruang tersisa. Pada chapter pembuka section ini kita melihat masalah apa saja yang dipecahkan Flexbox, sejarah singkatnya, dan bagaimana satu deklarasi display: flex mengubah perilaku seluruh anak dari sebuah elemen.

Masalah yang Dipecahkan Flexbox #

Tiga kebutuhan layout yang paling sering muncul dulu membutuhkan trik yang cepat usang:

Kebutuhan	Cara era float	Dengan Flexbox
Kartu sejajar meski isinya berbeda	`min-height` manual yang salah lagi saat konten bertambah	Otomatis: item diregangkan mengikuti barisnya
Menengahkan konten secara vertikal	tabel, `position` plus `transform`, atau padding tebakan	`align-items: center`
Navigasi yang menyesuaikan isi	float plus clearfix, lebar persen dihitung tangan	`display: flex` plus `justify-content`

Pola yang terlihat pada tabel: solusi lama mengunci angka yang harus diubah ulang setiap konten berubah, sedangkan Flexbox mendistribusikan ruang saat halaman dirender. Kita menuliskan maksudnya (“sejajarkan”, “beri jarak”, “tengahkan”), dan browser yang menghitung sisanya.

Sejarah Singkat: dari Float ke Flexbox #

Layout web bergerak melalui tiga gelombang. Era awal memakai tabel HTML untuk mengatur kolom; kemudian datang float — property yang sebenarnya dibuat agar teks mengalir mengelilingi gambar, tetapi ikut dipakai untuk kolom karena tidak ada pilihan lain; selanjutnya inline-block dan perhitungan persen melengkapi daftar trik tersebut.

Flexbox diusulkan untuk menggantikan semua trik itu dengan model yang jujur: sebuah container yang mendistribusikan ruang kepada itemnya. Sintaks finalnya butuh waktu beberapa tahun untuk distabilkan, dan sekitar pertengahan dekade 2010-an dukungannya sudah menyeluruh. Hari ini Flexbox didukung seluruh browser modern tanpa prefix maupun fallback, sehingga aman dipakai sebagai fondasi, bukan tambalan. Kesuksesannya kemudian diikuti CSS Grid untuk layout dua dimensi — dua modul ini dirancang untuk bekerja bersama, dan section CSS Grid akan membahasnya secara khusus.

display: flex Mengubah Perilaku Anak #

Konsep intinya hanya satu: elemen yang diberi display: flex menjadi flex container, dan semua anak langsungnya otomatis menjadi flex item dengan aturan penyusunan baru:

css
.daftar-produk {
  display: flex;
  gap: 16px;
}

Demo berikut membandingkan markup yang sama persis dengan dan tanpa display: flex:

Perhatikan bahwa cukup satu class pada container. Kita tidak menambahkan class ke tiap anak, tidak menghitung lebar persen, dan tidak membersihkan float. Perilaku baru ini berlaku untuk setiap anak langsung, termasuk anak yang ditambahkan oleh JavaScript di kemudian hari.

Satu hal penting yang tidak berubah: markup. Elemen tetap sama, urutan di DOM tetap sama, dan struktur semantik tidak tersentuh — yang berubah hanya cara browser menyusunnya. Dengan begitu, pembaca layar dan mesin pencari tetap menerima dokumen yang urut, sementara visualnya bebas disusun ulang. Pembatasan ini sehat: Flexbox mengatur tampilan, bukan menulis ulang makna dokumen.

Peta Pembelajaran Section Ini #

Section Flexbox berjalan dari konsep menuju penerapan:

Fondasi: flex container dan flex items, dua sumbu (main axis dan cross axis), flex-direction, dan flex-wrap.
Perataan dan jarak: justify-content, align-items, align-content, align-self, dan gap.
Besaran item: flex-grow, flex-shrink, flex-basis, shorthand flex, serta trik margin auto.
Penerapan: nested flex containers, layout navigasi, layout kartu, dan cara memilih antara Flexbox dan CSS Grid.

Ringkasan #

Flexbox adalah modul layout satu dimensi yang menyelesaikan tiga masalah klasik: tinggi kartu yang sejajar, perataan vertikal, dan navigasi yang lentur. Kuncinya satu deklarasi display: flex yang mengubah perilaku semua anak langsung dari sebuah elemen. Selanjutnya kita resmikan kosakatanya: siapa container, siapa item, dan properti mana yang ditujukan untuk masing-masing.