Aceste trei proprietăți pe flex items controlează cum distribuie spațiul de-a lungul axei principale. Prescurtarea flex le combină.
css
.item { : ; }
flex-basis — dimensiunea ideală/inițială a articolului de-a lungul axei principale (cum ar fi width pentru o linie). auto utilizează dimensiunea conținutului.flex-grow — dacă există spațiu suplimentar, cât de lacom se extinde acest articol. 0 = nu crește; numerele mai mari cresc proporțional.flex-shrink — dacă nu există suficient spațiu, cât de ușor se contractă acest articol. 0 = nu se contracta niciodată (poate cauza depășire); implicit 1 = contractare după caz..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Spațiul suplimentar este împărțit în raportul valorilor de creștere, nu dimensiuni absolute.
.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 pe fiecare articol creează coloane egale; flex: 0 0 250px creează un panou rigid cu lățime fixă lângă unul flexibil.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Aceste proprietăți sunt modul în care controlezi dimensionarea proporțională în layouturi flex — coloane egale (flex: 1), panouri fixe-plus-fluide (flex: 0 0 X + flex: 1), și evitarea contracției nedorite (flex-shrink: 0).
Înțelegerea basis/grow/shrink transformă Flexbox din "articolele stau doar acolo" în control precis și responsiv.