Te tri lastnosti na flex postavkah nadzorujejo, kako si delijo prostor vzdolž glavne osi. Okrajšava flex jih kombinira.
css
.item { : ; }
flex-basis — idealna/začetna velikost postavke vzdolž glavne osi (kot je width za vrstico). auto uporablja velikost vsebine.flex-grow — če je dodatnega prostora, kako pohlepno se ta postavka razširi. 0 = ne rasti; višje številke rastejo sorazmerno.flex-shrink — če ni dovolj prostora, kako hitro se ta postavka skrči. 0 = nikoli se ne skrči (lahko povzroči prekoračitev); privzeto 1 = skrči se 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 deli v razmerju vrednosti rasti, ne absolutnih velikosti.
.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 vsaki postavki naredi enake stolpce; flex: 0 0 250px naredi togo ploščo s fiksno širino ob fleksibilni.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Te lastnosti so način, kako nadzorujete sorazmerno velikost v flex razporedih — enaki stolpci (flex: 1), fiksne in fleksibilne plošče (flex: 0 0 X + flex: 1) ter preprečevanje nezaželjenega krčenja (flex-shrink: 0).
Razumevanje basis/grow/shrink spremeni Flexbox iz "postavke samo sedijo tam" v natančno, odzivno kontrolo.