‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

כדי להגדיר את ההתנהגות של קונטיינר 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. חשבון ילד/ה 2 הוא 40dp. המרחב הנדרש הוא 48dp. יש מקום, ולכן הפער וילד 2 ממוקמים בשורה.

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

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