בסיס בסיס

flex-basisהרכוש מגדיר את הגודל flex-itemלאורך הציר הראשי של מיכל Flex. הציר הראשי הוא אופקי אם flex-directionמוגדר ל- rowוהוא יהיה אנכי אם flex-directionהמאפיין מוגדר column.

תחביר

flex-basis: auto | content |  | ;

בסיס בסיס: אוטומטי

flex-basis: autoמחפש את הגודל העיקרי של האלמנט ומגדיר את הגודל. לדוגמא, על מיכל Flex אופקי, autoיחפש widthו heightאם ציר מיכל הוא אנכי.

אם לא צוין גודל, autoיחזור ל content.

בסיס בסיס: תוכן

flex-basis: contentפותר את הגודל המבוסס על תוכן האלמנט, אלא אם כן widthאו heightמוגדר הדרך נורמאלי box-sizing.

בשני המקרים שבם flex-basisהוא גם autoאו content, אם הגודל ראשי מצוין, גודל כי יקבל קדימות.

בסיס גמיש:

זה בדיוק כמו לציין widthאו height, אבל רק גמיש יותר. flex-basis: 20em;יגדיר את הגודל הראשוני של האלמנט ל- 20em. גודלו הסופי יתבסס על שטח פנוי, flex-growמרובה flex-shrinkוכמה.

המפרט מציע שימוש flexבקניין קצר. זה עוזר לכתוב flex-basisיחד עם flex-growו flex-shrinkנכסים.

דוגמאות

הנה שורות של מכולות Flex פרט ואלמנטי Flex פרט מראים כיצד flex-basisמשפיע על box-sizing.

כאשר flex-directionהוא column, אותו הדבר flex-basisישלוט heightבנכס. אתה יכול לראות את זה בדוגמה למטה:

עוד מידע:

אתה יכול לממן הפניות נוספות אודות המאפיין flex flex בדפים הבאים:

• מפרט CSS רמה 1
• דף רשת המפתחים של מוזילה על בסיס בסיסי

מידע נוסף על Flexbox:

• טיפים וטריקים של CSS Flexbox
• Flexbox - גיליון הצ'אט האולטימטיבי