FlexBox

הערה: FlexBox הוא API ניסיוני, ויש סיכוי שהוא ישתנה בעתיד. כדי להשתמש בו, מוסיפים את ההערה @ExperimentalFlexBoxApi לקוד. נתקלתם בבעיה או רוצים לשלוח משוב? אתם מוזמנים לעשות זאת במעקב הבעיות.

‫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 בסיסי.