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

כדי להגדיר את ההתנהגות של קונטיינר 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. יש מקום, ולכן Child 1 ממוקם בתור.

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

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

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