Justify Content

Setelah items tersusun searah main axis, hampir selalu tersisa ruang kosong yang belum terpakai — dan cara ruang itu dibagilah yang menentukan kesan akhir sebuah layout. justify-content adalah properti container yang mengatur distribusi ruang sisa di main axis: items dapat ditempel ke satu ujung, dipusatkan, atau direnggangkan dengan pola tertentu. Properti ini punya enam nilai, dan semuanya dapat dipahami dari satu perhitungan yang sama. Pada Chapter ini kita menghitung distribusinya secara eksplisit, lalu memverifikasinya dengan demo.

Enam Nilai dan Pembagiannya #

Contoh kerja kita memakai container selebar 600px berisi tiga item 100px. Total lebar items 300px, sehingga ruang sisa di main axis adalah 300px. Tabel berikut menunjukkan bagaimana setiap nilai membagi ruang tersebut:

Tiga nilai pertama memindahkan grup items secara utuh; tiga nilai space-* membagi ruang menjadi celah. Perbedaan space-around dan space-evenly ada di tepi: space-around memberi setiap item “margin setengah ukuran” sehingga jarak di tepi menjadi setengah dari jarak antar item, sedangkan space-evenly membuat semua celah — tepi dan antar item — sama lebar.

Kode dan Perhitungannya #

File CSS berikut dipakai oleh demo chapter ini. Enam papan berisi items yang sama persis, hanya nilai justify-content yang berbeda:

.papan {
  display: flex;
  width: 600px;
  height: 80px;
  background: rgb(241, 245, 249);
}
.awan     { justify-content: flex-start; }
.tengah   { justify-content: center; }
.ujung    { justify-content: flex-end; }
.renggang { justify-content: space-between; }
.seling   { justify-content: space-around; }
.rata     { justify-content: space-evenly; }
.kotak {
  width: 100px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}

Mari kita telaah bagian-bagian pentingnya:

1. Baris 4 (width: 600px;): lebar tetap ini menjadikan perhitungan ruang sisa pasti — 600px dikurangi 3 × 100px items sama dengan 300px.
2. Baris 5 (height: 80px;): tinggi papan lebih besar dari tinggi items (48px) supaya terlihat bahwa justify-content sama sekali tidak menyentuh cross axis.
3. Baris 10 (justify-content: center;): ruang sisa 300px dibagi dua sama besar; 150px di kiri dan 150px di kanan grup items.
4. Baris 12 (justify-content: space-between;): seluruh ruang sisa ditempatkan di antara items; dengan tiga item ada dua celah, masing-masing 150px, dan tepi tetap kosong dari ruang sisa.
5. Baris 14 (justify-content: space-evenly;): ruang sisa dibagi menjadi empat bagian sama besar (dua tepi + dua celah) — 75px per bagian.

HTML pendampingnya mengulang struktur yang sama untuk enam papan:

<div class="papan renggang">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
</div>

Hasil di Browser:

Enam papan selebar 600px masing-masing berisi tiga kotak 100px (ruang sisa 300px).
Nilai computed yang diperiksa harness: papan tengah = center (kotak di tengah,
150px ruang di kiri dan kanan), papan renggang = space-between (dua celah
150px, tanpa ruang di tepi), papan seling = space-around (tepi 50px,
celah antar item 100px), papan rata = space-evenly (tepi dan celah
seragam 75px). Papan awan dan ujung menempel ke kiri dan ke kanan.

Kapan justify-content Tidak Berkarya #

justify-content membagi ruang sisa — bila ruang sisa nol atau minus, tidak ada yang bisa dibagikan. Kondisi ini terjadi ketika items memenuhi container atau bahkan menuntut lebih (overflow), misalnya enam item 100px di dalam papan 600px. Pada kondisi itu keenam nilai akan tampak identik, dan solusinya bukan mengganti nilai justify-content melainkan memperlancar ukuran items dengan flex-shrink atau membolehkan pindah baris dengan flex-wrap — dua topik chapter berikutnya.

.papan {
  display: flex;
  width: 600px;
  height: 80px;
  background: rgb(241, 245, 249);
}
.awan     { justify-content: flex-start; }
.tengah   { justify-content: center; }
.ujung    { justify-content: flex-end; }
.renggang { justify-content: space-between; }
.seling   { justify-content: space-around; }
.rata     { justify-content: space-evenly; }
.kotak {
  width: 100px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}