FlexBox

הערה: FlexBox הוא כרגע API ניסיוני, ויש סיכוי שהוא ישתנה בעתיד. אפשר לדווח על בעיות במעקב אחר בעיות.

‫FlexBox הוא מאגר שבו הפריטים מוצגים בכיוון אחד. הוא יכול לשנות את הגודל, להוסיף גלישת טקסט, ליישר ולחלק את הרווח בין הפריטים כדי למלא בצורה אופטימלית את המקום הפנוי. זה פריסה שימושית לפריטים בגדלים שונים ולשינוי הגודל של פריטים כשהשטח הזמין משתנה.

בעזרת FlexBox אפשר:

• שליטה באופן ההגדלה וההקטנה של הפריטים כדי למלא את השטח הזמין
• העברת פריטים לשורות או לעמודות חדשות כשאין מספיק מקום בשורות או בעמודות הקיימות
• חלוקת רווחים נוספים בין פריטים באמצעות הגדרות קבועות מראש

מתי כדאי להשתמש ב-FlexBox

‫FlexBox משמש בדרך כלל להצגת מספר קטן של פריטים בתוך פריסת מסך כוללת. לפריסת מסך כוללת, בדרך כלל עדיף להשתמש ב-Grid. ‫FlexBox לא תומך בטעינה עצלה של פריטים. כדי להציג מספרים גדולים של פריטים, משתמשים ברשימות וברשתות עצלות. אם אתם צריכים לעטוף פריטים, השתמשו ב-FlexBox במקום ב-FlowRow וב-FlowColumn.

הסברים על המונחים

נקודה חשובה: FlexBox מושפע מאוד ממפרט הפריסה של CSS Flexible Box, והמושגים, המינוח וההתנהגות שלו כמעט זהים. אם אתם מכירים את display: flex, תגלו שהמאפיינים וההתנהגות של FlexBox כמעט זהים.

‫FlexBox מסדר את הפריטים שלו בשורות אופקיות או אנכיות. הכיוון של הקווים האלה קובע את הציר הראשי. ציר שמאונך לציר הראשי נקרא ציר משני. האורך של FlexBox לאורך הציר הראשי נקרא הגודל הראשי. האורך המתאים של הציר המצטלב נקרא גודל הצלב. הגדלים והצירים האלה הם הבסיס להתנהגות של FlexBox.

איור 1. צירים וגדלים כשהכיוון FlexBox הוא Row.

איור 2. צירים וגדלים כשהכיוון FlexBox הוא Column.

החלת מאפיינים

יש שתי דרכים להחיל מאפיינים של FlexBox:

• למאגר התגים FlexBox באמצעות FlexBox(config)
• לפריט בתוך FlexBox באמצעות Modifier.flex

מאפייני מאגר (config)	מאפייני פריט (Modifier.flex)
‫direction – כיוון הפריסה של הפריט ‫wrap – האם להוסיף פריטים אם הגודל הראשי לא מספיק ‫justifyContent – איך מפיצים פריטים לאורך הציר הראשי ‫alignItems – איך מיישרים פריטים לאורך הציר הניצב alignContent – איך לחלק את המקום הנוסף מהגודל המשותף כשיש כמה שורות ‫rowGap / columnGap – הוספת רווח בין פריטים ושורות מידע נוסף על המאפיינים האלה זמין במאמר הגדרת התנהגות של מאגרי תגים.	‫basis – גודל הפריט לפני חלוקת הרווח הנוסף מהגודל הראשי ‫grow – החלק היחסי של המקום הנוסף מתוך המידה הראשית שהפריט הזה צריך לקבל ‫shrink – חלק מהמחסור בשטח מתוך הגודל העיקרי שהפריט הזה צריך לקבל ‫alignSelf – איך לחלק את השטח הנוסף מהגודל הכולל לפריט הזה. מחליף את alignItems ‫order – קובע את סדר הפריסה מידע נוסף על המאפיינים האלה זמין במאמר הגדרת התנהגות של פריטים.

הסבר על אלגוריתם הפריסה FlexBox

אחת מהתכונות החזקות ביותר של FlexBox היא היכולת לשנות את הגודל של רכיבי הצאצא שלה כדי להתאים בצורה הטובה ביותר למקום שזמין לה. הבנה של האופן שבו FlexBox עושה זאת יכולה לעזור לכם להגדיר מאפיינים של FlexBox כדי לבצע אופטימיזציה של ממשק המשתמש לכל הגדלים האפשריים.

אלגוריתם הפריסה של FlexBox פועל באופן הבא:

1. חישוב הגודל הבסיסי של רכיב צאצא: משתמשים בערך basis של רכיב הצאצא כדי לחשב את הגודל ההתחלתי שלו לאורך הציר הראשי לפני חלוקת השטח הנוסף.

2. מיון הילדים: מיון הילדים לפי ערכי order, אם יש כאלה.

3. יצירת שורות: לכל רכיב צאצא, המערכת בודקת אם הגודל ההתחלתי שלו בתוספת gap יתאים לשטח שנותר בשורה הנוכחית. אם כן, צריך להוסיף את הילד או הילדה לרשימת ההמתנה. אם לא, מציבים אותו בשורה חדשה אם הגלישה מופעלת, או מציבים את הפריט בשורה הנוכחית, שם הוא יחרוג מהגבולות (הוא יהיה מוסתר חלקית על ידי הקצה של הקונטיינר).

4. יישור או שינוי גודל של פריטים בציר הראשי: לכל שורה, מחלקים את הרווח הנוסף בין הפריטים או משנים את הגודל שלהם או מיישרים אותם.

5. יישור או שינוי גודל של פריטים בציר המשני: לכל שורה, אפשר למתוח או ליישר את הפריטים והשורות כדי לחלק את הרווח הנוסף ביניהם.

אחרי שהכרתם את המושגים של FlexBox, תוכלו לעיין במאמר תחילת העבודה כדי ליצור FlexBox בסיסי.