הגדרת אופן הפעולה של המאגר

כדי להגדיר את ההתנהגות של קונטיינר FlexBox, יוצרים בלוק FlexBoxConfig ומספקים אותו באמצעות הפרמטר config.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

משתמשים ב-FlexBoxConfig כדי להגדיר את כיוון הפריסה, את אופן הגלישה, את היישור ואת הרווחים בין הפריטים.

כיוון הפריסה

הפונקציה direction מגדירה את הציר הראשי, שקובע את הכיוון שבו הפריטים מוצגים. אפשר להזין בו את הערכים הבאים:

‫Row (ברירת מחדל): מגדיר את הציר הראשי כאופקי. במקומות שבהם הכיוון הוא משמאל לימין, הכיוון יהיה משמאל לימין, וההפך במקומות שבהם הכיוון הוא מימין לשמאל.
‫RowReverse: הופך את הכיוון של Row.
‫Column: מגדיר את הציר הראשי כאנכי, מלמעלה למטה.
‫ColumnReverse: הופך את הכיוון של Column.

יישור פריטים וחלוקת רווחים נוספים

בקטעים הבאים מוסבר איך ליישר פריטים ולחלק את המרווחים הנוספים לאורך הציר הראשי והציר המשני.

לאורך הציר הראשי

משתמשים ב-justifyContent כדי לפזר פריטים לאורך הציר הראשי. בטבלה הבאה מוצגת ההתנהגות כשהכיוון הוא Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

לאורך הציר הניצב

משתמשים ב-alignItems כדי ליישר פריטים לאורך הציר הניצב בתוך שורה אחת. אפשר לשנות את ההתנהגות הזו לפריטים ספציפיים באמצעות המשנה alignSelf.

בתמונות הבאות מוצגת ההתנהגות כשהכיוון הוא Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

כדי ליישר את השורות לציר המשני ולחלק את הרווח הנוסף בין השורות, משתמשים בדגל alignContent. המאפיין הזה רלוונטי רק כשיש כמה שורות (הגלישה מופעלת). בתמונות הבאות מוצגת ההתנהגות כשהכיוון הוא Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

הצגת הפריטים בכמה שורות

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

ערך `FlexWrap`	דוגמה לשימוש בכיוון `Row`
‫`NoWrap` (ברירת מחדל): הפריטים לא יוצגו בשורות חדשות. אם המידה הראשית לא מספיקה, הפריטים יגלשו.
‫`Wrap`: אם אין מספיק מקום לפריט (בתוספת הרווח), נוצרת שורה חדשה בכיוון של הציר המשני. לדוגמה, אם הכיוון הוא `Row`, שורה חדשה נוספת מתחת.
‫`WrapReverse`: כמו `Wrap`, רק שהשורה החדשה מתווספת בכיוון ההפוך לציר הניצב. לדוגמה, אם הכיוון הוא `Row`, שורה חדשה נוספת מעל.

בדוגמה הבאה אפשר לראות איך פועל אלגוריתם העטיפה של FlexBox. המאגר FlexBox הוא בגודל 100dp, עם wrap שמוגדר כ-FlexWrap.Wrap ורווח של 8dp. הוא מכיל שלושה פריטים עם basis 20dp,‏ 40dp ו-50dp, בהתאמה.

יש 100dp מקומות פנויים בתור. ילד/ה 1 הוא/היא 20dp. יש מקום, אז ילד 1 מתווסף לתור.

הפריט הראשון שמוצב בקונטיינר FlexBox. — **איור 1.** הפריט הראשון שהוצב בקונטיינר `FlexBox`.

יש 80dp מקומות פנויים בתור. הפער הוא 8dp. ילד 2 הוא 40dp. השטח הנדרש הוא 48dp. יש מקום, ולכן הפער והילד 2 ממוקמים בשורה.

יש 32dp מקומות פנויים בתור. הפער הוא 8dp. הילד/ה מספר 3 הוא/היא 50dp. השטח הנדרש הוא 58dp. אין מספיק מקום בשורה הנוכחית, ולכן Child 3 ממוקם בשורה חדשה.