Sejauh ini ruang sisa pada flex container kita serahkan kepada justify-content atau flex-grow — dua mekanisme yang membagi ruang kepada semua item sekaligus. Sering kali kebutuhan kita lebih sempit: biarkan item lain tetap di kiri, dan dorong satu item saja ke ujung kanan. Untuk kebutuhan itu, flexbox menyediakan alat paling elegan: margin: auto pada flex item. Di dalam flex container, margin auto menyerap ruang bebas pada sisi yang diberinya, dan chapter ini menunjukkan cara kerjanya beserta pola navigasi yang memanfaatkannya.
Cara Kerja Margin Auto pada Flexbox #
Nilai auto pada margin biasa (di normal flow) hanya bekerja untuk menengahkan kotak block secara horizontal. Di dalam flex container, kemampuannya jauh lebih luas: margin auto menyerap ruang bebas pada sumbu mana pun — main axis maupun cross axis. Satu sisi yang diberi auto menelan seluruh sisa ruang di sisi itu, sehingga item terdorong ke arah lawannya:
| Deklarasi pada item | Efek pada layout |
|---|---|
margin-left: auto | Item terdorong ke ujung kanan baris |
margin-right: auto | Item terdorong ke ujung kiri baris |
margin: 0 auto | Sisa ruang terbagi kiri-kanan; item berada di tengah |
margin: auto 0 | Item terdorong ke tengah secara vertikal |
margin-top: auto (container column) | Item terdorong ke dasar container |
Ada satu aturan prioritas yang wajib diingat: ruang bebas diserap margin auto sebelum justify-content mendapat giliran membagikannya. Jika satu item punya margin-left: auto, sisa ruang sudah habis pada margin tersebut, sehingga justify-content tidak lagi punya sesuatu untuk didistribusikan — seolah tidak bekerja. Karena itu jangan mencampur keduanya untuk mengatur ruang yang sama; pilih satu mekanisme.
Mendorong Satu Item ke Ujung #
Pola paling ikonik adalah tombol keranjang pada navbar: brand dan menu berkumpul di kiri, keranjang menempel di ujung kanan apa pun lebar layarnya. Tidak ada perhitungan lebar, tidak ada position: absolute — hanya satu deklarasi margin:
.nav-utama {
display: flex;
align-items: center;
gap: 16px;
}
.nav-keranjang {
margin-left: auto; /* serap seluruh ruang sisa di kirinya */
}Demo berikut memuat navbar dengan keranjang ber-margin-left: auto, plus satu toolbar yang menengahkan tombolnya dengan margin: 0 auto:
Perkecil lebar demo dan amati keduanya tetap pada posisi relatif yang sama.
Mari kita telaah interaksinya dengan gap:
gap: 16px: jarak minimum antar item tetap terjaga; gap disisihkan lebih dulu sebelum sisa ruang dihitung.margin-left: auto: ruang yang tersisa setelah ukuran item dan gap dipenuhi diserap seluruhnya oleh sisi kiri keranjang.- Hasil akhir: keranjang selalu menempel di ujung, dan jarak menu terakhir ke keranjang otomatis menyesuaikan lebar container — tanpa satu piksel pun kita hitung manual.
Perlu ditegaskan bahwa margin auto hanya memindahkan item yang memilikinya. margin: 0 auto pada satu item menengahkan item itu saja; gerombolan item lain tetap di tempatnya. Untuk menengahkan seluruh kelompok, justify-content: center tetap alat yang tepat.
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikannya |
|---|---|---|
Menggabungkan justify-content dengan margin auto pada ruang yang sama | Ruang habis diserap margin; justify-content tampak tidak berpengaruh | Pilih satu mekanisme per baris: distribusi via justify-content atau dorongan via margin auto |
Memberi margin: 0 auto lalu berharap seluruh grup ikut tengah | Hanya item pemilik margin yang berpindah; item lain tetap di kiri | Gunakan justify-content: center untuk menengahkan kelompok |
Lupa margin-top: auto pada layout kolom | Elemen dasar (mis. footer kartu) tidak menempel ke bawah | Beri margin-top: auto pada elemen yang harus menempel di dasar |
Ringkasan #
Di dalam flex container, margin auto menyerap ruang bebas pada sumbunya: margin-left: auto mendorong item ke ujung kanan, margin: 0 auto menengahkan satu item, dan margin-top: auto menempelkan item ke dasar pada layout kolom. Margin auto juga berhak mengambil ruang sebelum justify-content, sehingga keduanya jangan dipakai berebut ruang yang sama. Teknik ini baru terasa penuh gunanya ketika item berisi komponen lain yang juga perlu disusun sendiri — dan itulah topik chapter berikutnya: nested flex containers.