Menulis flex-grow, flex-shrink, dan flex-basis berjajar setiap saat terasa panjang, dan di sinilah shorthand flex masuk: satu property yang membawa ketiganya sekaligus. Shorthand ini populer karena bentuk ringkasnya — flex: 1 hampir pasti pernah kita lihat di kode orang lain — tetapi bentuk ringkas itu menyimpan perilaku yang sangat berbeda antar kata kunci. flex: 1 dan flex: auto sama-sama “membesar dan menyusut”, namun keduanya menghasilkan layout yang berbeda nyata. Chapter ini memetakan semua variasi tersebut agar kita memilih dengan sadar, bukan menghafal.
Empat Kata Kunci yang Wajib Dikenal #
Shorthand flex menerima satu hingga tiga nilai dengan urutan flex-grow, flex-shrink, flex-basis. Selain angka, property ini menyediakan empat kata kunci yang masing-masing adalah nama panggung untuk satu kombinasi:
| Nilai | Ekuivalen | Perilaku |
|---|---|---|
flex: initial | 0 1 auto | Nilai default: tidak membesar, boleh menyusut, basis dari konten |
flex: auto | 1 1 auto | Membesar dan menyusut, titik awal dari ukuran konten |
flex: 1 | 1 1 0% | Membesar dan menyusut, titik awal nol — pembagian rasio murni |
flex: none | 0 0 auto | Kaku: tidak membesar, tidak menyusut, ukuran mengikuti konten/width |
Perbedaan flex: auto dengan flex: 1 ada pada basisnya. flex: auto memakai basis auto, sehingga konten yang lebih panjang memulai dari titik awal yang lebih besar dan berakhir lebih lebar. flex: 1 memakai basis 0%, sehingga semua item memulai dari nol dan ukuran akhirnya murni ditentukan rasio grow — konten tidak berpengaruh. Dua baris CSS ini, ditempatkan pada tiga item berisi teks berbeda panjang, menghasilkan tiga kolom sama lebar pada kasus pertama dan tiga kolom tidak sama lebar pada kasus kedua:
.kolom-sama {
flex: 1; /* 1 1 0% — konten diabaikan, semua sama */
}
.kolom-proporsional {
flex: auto; /* 1 1 auto — konten menentukan porsi */
}Demo berikut menumpuk dua baris tiga kolom dengan panjang teks berbeda — baris pertama memakai flex: 1 pada semua kolom, baris kedua flex: auto:
Perkecil lebar demo: kedua pola tetap konsisten pada lebar mana pun.
Satu Nilai: Angka atau Lebar #
Ketika hanya satu nilai yang ditulis, browser menentukan maknanya dari bentuknya. Angka tanpa satuan dianggap nilai flex-grow — flex-shrink mengisi otomatis dengan 1 dan flex-basis dengan 0%. Sementara nilai berukuran (seperti 260px atau 30%) dianggap nilai flex-basis — dan dua komponen lainnya diisi 1 dan 1:
.item-utama {
flex: 2; /* 2 1 0%: porsi dua kali item flex: 1 */
}
.sidebar {
flex: 260px; /* 1 1 260px: berangkat dari 260px, boleh membesar/menyusut */
}Perhatikan jebakan halusnya: flex: 2 bukan sekadar flex-grow: 2. Menulis shorthand angka juga mengubah basis menjadi 0%, sedangkan menulis flex-grow: 2 saja membiarkan basis tetap auto. Dua penulisan itu menghasilkan ukuran akhir yang berbeda ketika konten itemnya berbeda — inilah alasan chapter Flex Basis menyarankan kesadaran penuh terhadap basis, bukan sekadar hafalan.
Kapan Memakai yang Mana #
Empat kata kunci tersebut masing-masing punya panggilan terbaiknya:
| Kebutuhan | Pilihan | Alasan |
|---|---|---|
| Kolom/panel sama lebar dari nol | flex: 1 | Basis 0% membuat konten tidak memengaruhi pembagian |
| Item membesar mengikuti banyaknya konten | flex: auto | Basis auto menjadikan ukuran konten titik awal |
| Avatar, ikon, tombol berukuran tetap | flex: none | Item tidak membesar dan tidak menyusut sama sekali |
| Mengembalikan perilaku default | flex: initial | Berguna untuk menimpa shorthand lain pada breakpoint |
Satu pengingat penting: flex: 1 membuat item boleh menyusut (shrink 1), tetapi jebakan min-width: auto dari chapter Flex Basis tetap berlaku. Teks panjang tanpa spasi masih bisa menolak menyusut di bawah ukuran min-content-nya; tambahkan min-width: 0 bila konten perlu terpotong.
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikannya |
|---|---|---|
Menulis flex-grow: 1 padahal maksudnya flex: 1 | Kolom tidak sama lebar karena basis tetap auto dan konten ikut menentukan | Gunakan flex: 1 agar basis menjadi 0% |
Mengira flex: 1 membuat item tidak bisa menyusut | Item tetap menyusut karena komponen shrink bernilai 1 | Ingat flex: 1 = 1 1 0%, bukan grow saja |
Memberi flex: none pada item berisi teks panjang | Item menolak menyusut dan baris meluber di layar sempit | Cadangkan flex: none untuk elemen berukuran stabil seperti ikon |
Ringkasan #
Shorthand flex membawa grow, shrink, dan basis ke satu baris: flex: 1 berarti 1 1 0% untuk pembagian rasio murni, flex: auto berarti 1 1 auto untuk proporsi mengikuti konten, flex: none mengunci ukuran item, dan flex: initial mengembalikan default. Pilihan di antara keduanya ditentukan satu pertanyaan: apakah konten boleh memengaruhi porsi ruang atau tidak. Dengan ukuran item kini tuntas kita kendalikan, babak berikutnya berpindah ke teknik penyelarasan yang berbeda: menggunakan margin auto untuk mendorong satu item ke ujung baris.