JUSTIFY-CONTENT

Justify-content adalah properti dalam CSS yang berguna untuk mengatur sejauh mana item fleksibel menyebar di sepanjang garis utama sebuah elemen flex-container. justify-content sangat berguna saat kamu menginginkan lebih banyak kontrol atas penyebaran ruang antara dan sekitar item-item flex.

Penggunaan

Menggunakan justify-content sangat mudah. Kamu hanya perlu menetapkan properti ini pada elemen flex-container kamu. Contohnya seperti ini:

.container {
  display: flex;
  justify-content: center;
}

Dalam contoh di atas, semua anak elemen flex-container akan berada di tengah-tengah elemen .container, karena justify-content: center telah membuat semuanya berjajar di sepanjang garis utama.

Nilai Property

Justify-content memiliki beberapa nilai yang bisa kamu gunakan berdasarkan kebutuhan layout yang diinginkan. Berikut adalah penjelasan dan contoh penggunaannya:

flex-start

Mengatur item-item fleksibel ke awal garis utama.

.container {
  justify-content: flex-start;
}

flex-end

Mengatur item-item fleksibel ke akhir garis utama.

.container {
  justify-content: flex-end;
}

center

Mengatur item-item fleksibel ke tengah garis utama.

.container {
  justify-content: center;
}

space-between

Mengatur item-item fleksibel dengan ruang yang sama antara mereka. Item pertama akan ada di awal garis dan item terakhir di akhir garis.

.container {
  justify-content: space-between;
}

space-around

Item-item fleksibel menerima ruang sebanding sebelum dan sesudah. Ini berarti item di tengah memiliki ruang sebanding di kiri dan kanan, sedangkan yang berada di awal garis hanya memiliki ruang di kanan dan yang berada di akhir hanya memiliki ruang di kiri.

.container {
  justify-content: space-around;
}

Setelah memahami dan menguasai justify-content, kamu bisa lebih memaksimalkan penggunaan flexbox dalam desain layout. Selamat belajar dan berkreasi!