‫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 מקומות פנויים בתור. הילד הראשון הוא 20dp. יש מקום, אז הילד הראשון נכנס לתור.

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

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

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

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