Ova tri svojstva na flex stavkama kontroliraju kako dijele prostor duž glavne osi. Kratica flex ih kombinira.
css
.item { : ; }
flex-basis — idealna/početna veličina stavke duž glavne osi (kao width za red). auto koristi veličinu sadržaja.flex-grow — ako postoji dodatni prostor, koliko požudno ova stavka raste. 0 = nemoj rasti; veći brojevi rastu proporcionalno.flex-shrink — ako nema dovoljno prostora, koliko lako ova stavka se skuplja. 0 = nikad se ne skupljaj (može uzrokovati prekoračenje); zadana vrijednost 1 = skupljaj po potrebi..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Dodatni prostor se dijeli u omjeru vrijednosti rasta, a ne apsolutnih veličina.
.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 na svakoj stavci čini jednake stupce; flex: 0 0 250px čini kruti panel fiksne širine pored fleksibilnog.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Ova svojstva kontroliraju proporcionalno određivanje veličine u flex rasporedima — jednaki stupci (flex: 1), paneli fiksni-plus-fluidni (flex: 0 0 X + flex: 1), i sprječavanje neželjenog skupljanja (flex-shrink: 0).
Razumijevanje basis/grow/shrink pretvara Flexbox iz "stavke samo sjede" u preciznu, odzivnu kontrolu.