Di lesson alignment, container yang mengatur posisi item. Di sini tiap item mengatur ukurannya sendiri: boleh melebar mengisi ruang kosong atau gak, boleh menyusut atau gak. Ruang kosong itu disebut sisa ruang: lebar container dikurangi lebar awal semua item.
🧪 Tebakan cepat: tiga kolom sama-sama punya
flex-grow: 1, tapi lebar awalnya beda. Sesudah melebar, lebarnya jadi sama atau tetap beda? Tebak dulu, jawabannya ada di bagian "flex-grow membagi sisa ruang".
flex-grow membagi sisa ruang
.layout { display: flex; }
.sidebar { width: 88px; flex-grow: 0; }
.content { width: 64px; flex-grow: 1; }
.aside { width: 72px; flex-grow: 0; }
- Tiap kolom mulai dari lebarnya sendiri (
width). Kalau.layoutlebih lebar dari total ketiganya, sisanya kosong di kanan. flex-grow: 0artinya "jangan ambil sisa ruang". Kolomnya tetap selebar awalnya. Ini nilai bawaan.flex-grow: 1artinya "minta bagian dari sisa ruang". Di sini cuma.contentyang minta, jadi semua sisa ruang masuk ke dia.
Hasilnya, Sidebar dan Aside tetap sempit, Konten melebar sampai barisnya penuh.
Angka flex-grow adalah jatah. Kalau dua item punya flex-grow: 1 dan satu punya flex-grow: 2, sisa ruang dibagi jadi empat bagian, dan yang 2 dapat dua bagian. Yang dibagi cuma sisa ruangnya, jadi kolom yang lebar awalnya beda tetap beda lebar walau flex-grow-nya sama. Itu jawaban tebakannya.
flex: 1 buat mengisi sisa ruang
flex adalah singkatan tiga properti sekaligus:
flex-grow: boleh melebar seberapa banyak.flex-shrink: boleh menyusut kalau ruangnya sempit.1boleh (bawaan),0gak boleh.flex-basis: ukuran awal item sebelum melebar atau menyusut. Kalau ditulis, dia dipakai, bukanwidth.
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }
flex: 0 0 250px artinya gak melebar, gak menyusut, tetap 250px. flex: 1 sama dengan flex-grow: 1; flex-shrink: 1; flex-basis: 0. Basis 0 berarti seluruh ruang dianggap sisa, jadi beberapa item dengan flex: 1 dapat lebar yang sama rata. Hasilnya sidebar tetap 250px dan konten mengisi semua ruang di sebelahnya, resep layout dashboard.
flex-grow: 1 saja beda dengan flex: 1: basisnya tetap lebar isi. Kalau diminta flex: 1, tulis flex: 1.
Ubah urutan dengan order
.aside { order: -1; }
Item dengan order lebih kecil tampil lebih dulu. Nilai bawaannya 0, jadi order: -1 memindahkan .aside ke paling depan tanpa mengubah HTML.
⚠️ Jebakan yang sering ketemu
- Mengira
flex-grow: 2bikin item dua kali lebih lebar. Yang dua kali lipat cuma jatah sisa ruangnya. Lebar akhirnya juga tergantung lebar awal. - Rule baru ketimpa rule lama. Dua rule yang sama kuatnya, misalnya
.boxdan.special, yang ditulis belakangan yang menang. Tulis rule khusus di bawah rule umum. - Teks panjang bikin item gak mau menyusut. Item flex gak menyusut lebih kecil dari isinya. Tambahkan
min-width: 0di item itu. ordercuma mengubah tampilan. Urutan baca screen reader dan tombol Tab tetap ikut HTML.
TL;DR: flex-grow membagi sisa ruang sesuai jatahnya (0 artinya gak ikut). flex-shrink mengatur boleh menyusut, flex-basis ukuran awal. flex: 1 (grow 1, shrink 1, basis 0) bikin item mengisi sisa ruang dan membaginya rata. flex: 0 0 250px mengunci ukuran 250px. order mengubah urutan tampil tanpa mengubah HTML.
