FlexBox

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

בעזרת FlexBox, אתם יכולים:

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

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

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

מונחים ומושגים

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

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