Sekarang kita tiba di properti Flexbox yang paling sering diketik sehari-hari: justify-content. Tugasnya satu — mendistribusikan sisa ruang di antara item di sepanjang main axis. Enam nilainya menjawab enam pertanyaan distribusi, dan tiga di antaranya (varian space-*) hanya berbeda pola pembagiannya. Karena bekerja di main axis, ingat rumus dari chapter sumbu: pada row ia menggeser mendatar, pada column ia menggeser vertikal.
Enam Nilai justify-content #
| Nilai | Perilaku |
|---|---|
flex-start (default) | Item menumpuk di awal main axis |
flex-end | Item menumpuk di akhir main axis |
center | Item berkumpul di tengah main axis |
space-between | Item pertama di awal, terakhir di akhir, sisa ruang di antara |
space-around | Setiap item dikelilingi ruang; ruang tepi setengah ruang antar item |
space-evenly | Semua jarak — tepi dan antar item — sama besar |
Tanpa deklarasi apa pun, container flex memakai flex-start: item menempel di awal dan seluruh sisa ruang berkumpul di akhir. Enam nilai ini hanyalah enam cara membagi ruang kosong tersebut.
Tiga nilai perataan pertama sering bekerja sendirian: center untuk toolbar tombol yang berkelompok di tengah, flex-end untuk aksi tambahan yang sengaja ditaruh di ujung, dan flex-start sebagai kembalian ke default. Tiga nilai space-* lebih sering dipakai berpasangan dengan gap: gap memasang jarak minimum yang pasti, lalu justify-content membagi sisa ruang di atasnya. Hasilnya item tidak pernah terlalu rapat bahkan saat ruang mepet, namun tetap tersebar merata saat ruang lega.
Membedakan Tiga Nilai space-* #
Ketiganya sama-sama “meratakan dengan jarak”, tetapi polanya berbeda:
Pola distribusi (▢ = ruang kosong; ilustrasi proporsi, bukan skala):
space-between [1]▢▢▢[2]▢▢▢[3]
space-around ▢[1]▢▢[2]▢▢[3]▢
space-evenly ▢▢[1]▢▢[2]▢▢[3]▢▢space-between: tidak ada ruang di tepi. Item pertama dan terakhir menempel pada batas container — pola klasik untuk navbar: merek di ujung kiri, tautan di ujung kanan.space-around: ruang di tepi berukuran setengah ruang antar item. Kesan visualnya seperti tiap item membawa “zona pribadi”.space-evenly: semua celah identik, termasuk dua celah di tepi. Pilihan yang paling adil saat semua item perlu jarak yang sama rata.
Demo berikut menampilkan ketiga pola pada deretan item yang sama persis:
.toolbar-editor {
display: flex;
justify-content: space-evenly;
gap: 8px;
}Pola paling ikonik dari justify-content adalah navbar dua ujung:
Kedua navbar pada demo memakai markup identik; yang memisahkan keduanya hanya satu deklarasi justify-content. Detail pada demo: container .tautan di dalam navbar juga flex (dengan gap) sehingga tiga tautannya berjajar rapi sebagai satu kesatuan yang diposisikan space-between oleh navbar.
Hanya Bekerja saat Ada Ruang Bebas #
justify-content membagi sisa ruang; bila tidak ada sisa, tidak ada yang bisa dibagi. Dua situasi yang membuatnya tampak tidak bereaksi:
- Item diperbesar hingga memenuhi container, misalnya semua item diberi besaran yang memenuhi main axis (kita bahas pada
flex-grow). - Total lebar item lebih besar dari container sehingga tidak ada ruang sisa sama sekali.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
Ingin tengah vertikal, memakai justify-content: center | Container row; center terjadi di sumbu mendatar | Pakai align-items: center |
| Property tampak tidak bereaksi | Item memenuhi container sehingga tidak ada ruang sisa | Kurangi besaran item atau periksa flex-grow |
| Item pertama/terakhir menempel tepi padahal tidak diinginkan | Itu memang perilaku space-between | Pakai space-around atau space-evenly |
Ringkasan #
justify-content mendistribusikan sisa ruang di main axis dengan enam pola: tiga perataan (flex-start, flex-end, center) dan tiga pembagian (space-between, space-around, space-evenly). Property ini hanya hidup ketika ada ruang bebas untuk dibagi. Main axis sudah tertangani; kini giliran cross axis — tempat tinggalnya perilaku paling berguna di Flexbox: perataan vertikal dan kartu yang sejajar tingginya melalui align-items.