justify-content: sepanjang main axis
Peta mental yang harus benar: justify-content bekerja sepanjang main axis. Saat flex-direction: row (default), main axis horizontal — jadi justify-content mengatur kiri-kanan. Nilai yang sering dipakai: flex-start, center, space-between (dorong ke ujung, jarak di tengah — pola navbar), space-around. Ingat juga bahwa justify-content hanya membagi ruang SISA — kalau item sudah memenuhi seluruh lebar container, mengubah nilainya tidak akan terlihat.
👀 Contoh dulu
.a { display: flex; justify-content: flex-start; } /* semua menumpuk di kiri */
.b { display: flex; justify-content: center; } /* semua di tengah */
.c { display: flex; justify-content: space-between; } /* dorong ke dua ujung */Hasilnya: Tiga baris dengan susunan berbeda: menumpuk kiri, terpusat, dan terpisah ke ujung kiri-kanan.
💡 space-between = item pertama menempel awal, terakhir menempel akhir, sisa ruang dibagi di tengah.
📝 Sekarang giliranmu
Buat item terdorong ke ujung kiri dan kanan dengan justify-content: space-between.