Tiga properti ini pada flex items mengontrol bagaimana mereka berbagi ruang di sepanjang sumbu utama. Shorthand flex menggabungkan ketiganya.
css
{ : ; }
flex-basis — ukuran sumbu utama ideal/awal item (seperti width untuk baris). auto menggunakan ukuran konten.flex-grow — jika ada ruang berlebih, seberapa serakah item ini berkembang. 0 = jangan tumbuh; angka lebih tinggi tumbuh secara proporsional.flex-shrink — jika tidak ada cukup ruang, seberapa mudah item ini menyusut. 0 = jangan pernah menyusut (dapat menyebabkan overflow); default 1 = menyusut sesuai kebutuhan..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Ruang berlebih dibagi dalam rasio nilai pertumbuhan, bukan ukuran absolut.
.item { flex: 1; } /* = 1 1 0 → all items share space EQUALLY (equal widths) */
.item { flex: auto; } /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; } /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
flex: 1 pada setiap item membuat kolom yang sama; flex: 0 0 250px membuat panel lebar tetap yang kaku di samping satu yang fleksibel.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Properti ini adalah cara Anda mengontrol pengukuran proporsional dalam tata letak flex — kolom yang sama (flex: 1), panel tetap-plus-fluida (flex: 0 0 X + flex: 1), dan mencegah penyusutan yang tidak diinginkan (flex-shrink: 0).
Memahami basis/grow/shrink mengubah Flexbox dari "item hanya duduk di sana" menjadi kontrol yang presisi dan responsif.