Flex Grow, Flex Shrink, dan Flex Basis

Tiga properti menentukan bagaimana flex item berinteraksi dengan ruang di main axis: flex-grow mengatur cara mengambil ruang sisa, flex-shrink mengatur cara melepas ruang ketika kekurangan, dan flex-basis menetapkan ukuran awal perhitungannya. Shorthand flex merangkum ketiganya dalam satu deklarasi, sehingga flex: 1 yang sering kita lihat di kode orang lain sesungguhnya adalah tiga nilai sekaligus. Pada Chapter ini kita menghitung ketiga mekanisme itu secara eksplisit, termasuk satu jebakan klasik bernama min-width: auto.

Anatomi flex: 1 #

Properti flex menerima hingga tiga nilai: <flex-grow> <flex-shrink> <flex-basis>. Nilai yang sering kita temui memiliki padanan sebagai berikut:

Perhatikan perbedaan yang sering keliru: flex: 1 memakai basis 0%, bukan auto. Dengan basis 0%, setiap item memulai dari nol lalu membagi seluruh ruang container sesuai proporsi grow — ukuran konten diabaikan. Dengan flex: auto, item memulai dari ukuran kontennya, sehingga item dengan konten lebih panjang mendapat porsi lebih besar.

flex-grow: Membagi Ruang Sisa #

File CSS berikut dipakai oleh demo chapter ini dan menjadi bahan hitung-hitungan kita:

.papan-grow {
  display: flex;
  width: 500px;
  background: rgb(241, 245, 249);
}
.papan-shrink {
  display: flex;
  width: 300px;
  background: rgb(241, 245, 249);
}
.item-satu     { flex: 1 1 100px; }  /* grow 1, shrink 1, basis 100px */
.item-dua      { flex: 2 1 100px; }  /* grow 2: porsi dua kali lipat */
.item-menyusut { flex: 0 1 200px; }  /* grow 0, shrink 1, basis 200px */
.item-flex     { flex: 1; }          /* singkatan dari 1 1 0% */
.kotak {
  height: 56px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 56px;
}

Mari kita hitung papan pertama (.papan-grow, 500px):

1. Ukuran awal: kedua item berbasis 100px, total 200px — tersisa ruang sisa 300px.
2. Porsi grow: total faktor grow adalah 1 + 2 = 3, sehingga satu “unit” bernilai 300px ÷ 3 = 100px.
3. Hasil akhir: .item-satu menerima 100px + 1 unit = 200px; .item-dua menerima 100px + 2 unit = 300px. Grow selalu menghitung dari ruang sisa, bukan menggandakan ukuran item.

Hasil di Browser:

Papan grow (500px): item dengan flex 1 1 100px menjadi 200px, item dengan
flex 2 1 100px menjadi 300px — computed flex-grow 1 dan 2, flex-basis 100px.
Papan shrink (300px): dua item berbasis 200px menyusut masing-masing menjadi
150px (computed flex-shrink 1, width 150px).
Item dengan flex: 1 melaporkan computed flex-grow 1, flex-shrink 1,
flex-basis 0%.

flex-shrink: Menyusut Secara Proporsional #

Papan kedua (.papan-shrink, 300px) berisi dua item berbasis 200px: total 400px, kekurangan 100px. Faktor shrink keduanya sama-sama 1, dan saat faktor sama penyusutan ditimbang menurut basis — dua item berbasis sama berarti porsi sama. Setiap item melepas 50px, sehingga keduanya berakhir di 150px. Bila basisnya berbeda, misalnya 200px dan 100px, item berbasis besar melepas porsi lebih besar; jadi shrink 1 pada dua item tidak selalu berarti penyusutan sama besar.

Jebakan min-width: auto #

Secara default, flex item membawa min-width: auto — item menolak menyusut di bawah lebar kontennya yang terpendek (min-content). Untuk teks biasa yang boleh terpotong baris demi baris, nilai ini kecil dan tidak masalah. Masalah muncul pada teks panjang tanpa spasi atau elemen lebar seperti tabel: item menolak menyusut, lalu menjejol keluar dari container. Solusi standarnya satu baris: min-width: 0.

.kata-panjang   { flex: 1; white-space: nowrap; }              /* menolak menyusut */
.kata-terkawal  { flex: 1; min-width: 0; white-space: nowrap; } /* boleh menyusut penuh */

Demo membandingkan keduanya di dua papan 400px: tanpa perbaikan, item menonjol keluar dari papan; dengan min-width: 0, item pas 400px. Nilai computed min-width item tanpa perbaikan juga dilaporkan browser sebagai auto — bukti bahwa aturan bawaan itulah yang bekerja.

Dengan tiga properti ini, distribusi ruang di main axis tuntas — ruang sisa dibagi oleh grow, kekurangan dilepas oleh shrink, dan basis menetapkan titik awalnya. Berikutnya kita merapikan sela di antara items dengan gap.

.papan-grow {
  display: flex;
  width: 500px;
  background: rgb(241, 245, 249);
}
.papan-shrink {
  display: flex;
  width: 300px;
  background: rgb(241, 245, 249);
}
.item-satu     { flex: 1 1 100px; }  /* grow 1, shrink 1, basis 100px */
.item-dua      { flex: 2 1 100px; }  /* grow 2: porsi dua kali lipat */
.item-menyusut { flex: 0 1 200px; }  /* grow 0, shrink 1, basis 200px */
.item-flex     { flex: 1; }          /* singkatan dari 1 1 0% */
.kata-panjang  { flex: 1; white-space: nowrap; }              /* min-width: auto */
.kata-terkawal { flex: 1; min-width: 0; white-space: nowrap; } /* boleh menyusut penuh */
.papan-min {
  display: flex;
  width: 400px;
  background: rgb(241, 245, 249);
}
.kotak {
  height: 56px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 56px;
}