FlexBox

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

בעזרת FlexBox, אפשר:

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

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

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

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

FlexBox מסדר את הפריטים שלו בשורות אופקיות או אנכיות. הכיוון של הקווים האלה קובע את הציר הראשי. ציר הצלב נמצא בזווית של 90 מעלות לציר הראשי. האורך של 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 בסיסי.