FlexBox

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

בעזרת FlexBox אפשר:

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

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

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

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

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

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

יש שתי דרכים להחיל מאפייני 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 בסיסי.