Bază flexibilă

flex-basis proprietatea definește dimensiunea fișierului flex-item de-a lungul axei principale a containerului flex. Axa principală este orizontală dacă flex-direction este setat sa row și va fi vertical dacă flex-direction proprietatea este setată la column.

Sintaxă

flex-basis: auto | content | <width> | <height>;

flex-base: auto

flex-basis: auto caută dimensiunea principală a elementului și definește dimensiunea. De exemplu, pe un container flex orizontal, auto va căuta width și height dacă axa containerului este verticală.

Dacă nu este specificată nicio dimensiune, auto va reveni la content.

flex-base: conținut

flex-basis: content rezolvă dimensiunea pe baza conținutului elementului, cu excepția cazului în care width sau height este setat prin normal box-sizing.

În ambele cazuri în care flex-basis este fie auto sau content, dacă este specificată dimensiunea principală, acea dimensiune va avea prioritate.

bază flexibilă:

Acest lucru este la fel de specificat width sau height, dar numai mai flexibil. flex-basis: 20em; va seta dimensiunea inițială a elementului la 20em. Dimensiunea sa finală se va baza pe spațiul disponibil, flex-grow multiple și flex-shrink multiplu.

Specificația sugerează utilizarea flex proprietate de stenografie. Acest lucru ajută la scriere flex-basis impreuna cu flex-grow și flex-shrink proprietăți.

Exemple

Aici sunt rânduri de containere flex individuale și elemente flex individuale care arată cum flex-basis afectează box-sizing.

efectul bazei flex pe axa orizontală

Cand flex-direction este column, la fel flex-basis va controla height proprietate. O puteți vedea în exemplul de mai jos:

exemplu de înălțime care controlează flexibilitatea într-un container vertical

Mai multe informatii:

Puteți finanța referințe suplimentare despre proprietatea bazei flex în următoarele pagini:

Mai multe informații despre Flexbox: