FlexBox

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

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

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

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

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

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

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

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