Flex Basis

flex-grow dan flex-shrink selalu bekerja terhadap satu titik acuan: ukuran dasar item sebelum ruang sisa dibagikan atau penyusutan dikenakan. Sampai chapter ini kita belum pernah mengatur titik acuan itu secara langsung — kita hanya menulis width dan berharap hasilnya masuk akal. flex-basis adalah property yang mengendalikan ukuran awal tersebut, dan penguasaannya yang membedakan layout flex yang prediktabel dari yang tidak terduga. Chapter ini membahas nilai auto dan 0, urutan kekuatan basis melawan width, serta jebakan min-width: auto yang menjadi sumber keluhan paling sering pada flexbox.

Ukuran Awal Sebelum Pembagian Ruang #

flex-basis mendefinisikan ukuran item pada main axis sebagai titik awal algoritme flex, sebelum flex-grow menambahkan porsi dan flex-shrink memotongnya. Nilai default-nya adalah auto, yang artinya: lihat property ukuran biasa terlebih dahulu. Pada flex-direction: row, basis auto mengambil nilai width; pada column, basis mengambil height. Jika property itu juga tidak diatur, browser memakai ukuran intrinsik konten — perilaku intrinsic sizing yang dibahas pada section Values, Units, dan Sizing.

Dengan kata lain, semua contoh kita sejauh ini sebenarnya memakai flex-basis: auto tanpa kita tulis. Menuliskannya secara eksplisit menjadi penting ketika kita ingin memisahkan “ukuran awal” dari “ukuran konten”:

.sisi-kiri {
  flex-basis: 240px; /* ukuran awal tetap di main axis */
  flex-grow: 0;
}

.isi-tengah {
  flex-basis: 0;     /* mulai dari nol, abaikan konten */
  flex-grow: 1;      /* lalu ambil porsi rasio */
}

Demo berikut menjalankan kedua peran itu — ukuran awal tetap di kiri, sisa ruang penuh di tengah:

Nilai 0 adalah kunci pola terakhir itu. Ketika basis nol, konten item tidak lagi berperan dalam perhitungan: pembagian ruang menjadi rasio murni antara nilai grow. Inilah fondasi dari shorthand flex: 1 yang akan kita bedah pada chapter berikutnya.

Basis Mengalahkan Width #

Karena flex item diatur oleh algoritme flex, flex-basis yang bernilai eksplisit mengalahkan width pada main axis. Urutannya bisa dirangkum dalam satu tabel:

.kartu {
  width: 220px;
  flex-basis: 140px; /* menang atas width pada main axis */
}

.kartu berangkat dari 140 piksel, bukan 220 piksel — width hanya berperan sebagai fallback ketika elemen yang sama berada di luar konteks flex.

Dua catatan menjaga kita tetap di jalur. Pertama, persentase seperti flex-basis: 30% dihitung terhadap ukuran main axis container (di dalam padding-nya), sehingga item ikut melebar saat container melebar. Kedua, pada flex-direction: column yang main axis-nya vertikal, yang dibandingkan adalah flex-basis melawan height — bukan melawan width. Basis selalu mengikuti arah sumbu, dan itulah alasan menulis flex-basis lebih aman daripada width: property-nya tidak tertukar saat arah container berubah.

Jebakan min-width: auto #

Penyusutan pada chapter sebelumnya punya batas bawah yang jarang disadari: setiap flex item membawa min-width: auto secara default. Nilai auto tersebut diterjemahkan menjadi ukuran minimum konten (min-content) — untuk teks, ukuran kata terpanjang yang tidak bisa dipatah. Konsekuensinya, item yang berisi satu kata sangat panjang (URL, kode pesanan, nama berkas) menolak menyusut di bawah kata itu, dan seluruh baris meluber keluar container meskipun flex-shrink aktif.

Inilah gotcha flexbox yang paling sering dilaporkan. Perbaikannya sederhana: nolkan batasnya dengan min-width: 0 pada item yang harus boleh terpotong, lalu pasang pemotongan teks dari section Typography:

.teks-berita {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;         /* boleh menyusut di bawah min-content */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Demo berikut membandingkan dua baris identik — satu dengan default min-width: auto, satu dengan min-width: 0 beserta pemotongan elipsis:

Kesalahan Umum #

Ringkasan #

flex-basis menetapkan titik acuan ukuran item pada main axis: auto mewarisi width/height atau ukuran konten, nilai eksplisit mengalahkan keduanya, dan 0 menghilangkan pengaruh konten agar pembagian ruang menjadi rasio murni. Sementara itu, min-width: auto menjelaskan mengapa item kadang menolak menyusut — dan min-width: 0 adalah kuncinya. Karena tiga property (flex-grow, flex-shrink, flex-basis) hampir selalu ditulis berdampingan, CSS menyediakan satu shorthand untuk merekat: property flex pada chapter berikutnya.