Ez a három tulajdonság a flex elemek esetén szabályozza, hogy hogyan osztoznak a téren a fő tengely mentén. A flex rövidítés összeköti őket.
css
{ : ; }
flex-basis — az elem ideális/kezdeti mérete a fő tengely mentén (mint a width egy sorban). Az auto a tartalom méretét használja.flex-grow — ha van extra hely, ez az elem milyen mohón nő. 0 = ne nőj; magasabb számok arányosan növekednek.flex-shrink — ha nincs elegendő hely, ez az elem milyen könnyen zsugorodik. 0 = soha ne zsugorodyj (túlfolyást okozhat); alapértelmezett 1 = zsugorodyj szükség szerint..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
A plusz helyet a növekedési értékek aránya alapján osztják fel, nem az abszolút méretek alapján.
.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 */
A flex: 1 minden elemen egyenlő oszlopokat hoz létre; a flex: 0 0 250px egy merev rögzített szélességű panelt hoz létre a rugalmas mellett.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Ez a tulajdonság az, hogyan szabályozza az arányos méretezést flex elrendezésekben — egyenlő oszlopok (flex: 1), rögzített-plusz-folyadék panelek (flex: 0 0 X + flex: 1), és a nem kívánt zsugorodás megakadályozása (flex-shrink: 0).
A basis/grow/shrink megértése a Flexbox-ot a "az elemek csak ott vannak" pontról az egyenletes, reaktív vezérlésre alakítja.