Définir le comportement du conteneur

Pour configurer le comportement du conteneur FlexBox, créez un bloc FlexBoxConfig et fournissez-le à l'aide du paramètre 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

Utilisez FlexBoxConfig pour définir la direction de la mise en page, le comportement d'habillage, l'alignement et les espaces entre les éléments.

Orientation de la mise en page

La propriété direction définit l'axe principal, qui détermine la direction dans laquelle les éléments sont disposés.

Row (par défaut) : définit l'axe principal sur horizontal. Dans les paramètres régionaux de gauche à droite, il s'agit de gauche à droite, et inversement dans les paramètres régionaux de droite à gauche.
RowReverse : inverse la direction de Row.
Column : définit l'axe principal sur vertical, de haut en bas.
ColumnReverse : inverse la direction de Column.

Aligner des éléments et répartir l'espace supplémentaire

Les sections suivantes expliquent comment aligner des éléments et répartir l'espace supplémentaire le long des axes principal et transversal.

Le long de l'axe principal

Utilisez justifyContent pour répartir les éléments le long de l'axe principal. Le tableau suivant indique le comportement lorsque la direction est Row.


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

Le long de l'axe transversal

Utilisez alignItems pour aligner les éléments le long de l'axe transversal sur une seule ligne. Ce comportement peut être remplacé par des éléments individuels à l'aide du modificateur alignSelf.

Les images suivantes montrent le comportement lorsque la direction est Row :


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

Utilisez alignContent pour aligner les lignes sur l'axe transversal et répartir l'espace supplémentaire entre les lignes. Cette propriété ne s'applique que lorsqu'il y a plusieurs lignes (l'habillage est activé). Les images suivantes montrent le comportement lorsque la direction est Row :


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

Encapsuler des éléments

L'habillage permet à un conteneur FlexBox de devenir multiligne, en déplaçant les éléments qui ne tiennent pas sur une nouvelle ligne ou colonne le long de l'axe transversal. Configurez le comportement d'habillage à l'aide de wrap.

Valeur `FlexWrap`	Exemple utilisant la direction `Row`
`NoWrap` (par défaut) : empêche les éléments de passer à la ligne. Les éléments débordent si la taille principale est insuffisante.
`Wrap` : lorsqu'il n'y a pas assez d'espace pour un élément (plus un éventuel espace), une nouvelle ligne est créée dans le sens de l'axe transversal. Par exemple, si la direction est `Row`, une nouvelle ligne est ajoutée en dessous.
`WrapReverse` : identique à `Wrap`, sauf que la nouvelle ligne est ajoutée dans le sens opposé à l'axe transversal. Par exemple, si la direction est `Row`, une nouvelle ligne est ajoutée au-dessus.

L'exemple suivant montre comment fonctionne l'algorithme d'encapsulation FlexBox. Le conteneur FlexBox a une taille principale de 100dp, avec wrap défini sur FlexWrap.Wrap et un espace de 8dp. Il contient trois éléments avec basis 20dp, 40dp et 50dp, respectivement.

Il reste 100dp places dans la file d'attente. L'enfant 1 est 20dp. Il y a de la place, donc l'enfant 1 est placé sur la ligne.

Premier élément placé dans le conteneur FlexBox. — **Figure 1.** Premier élément placé dans le conteneur `FlexBox`.

Il reste 80dp places dans la file d'attente. L'écart est de 8dp. L'enfant 2 est 40dp. L'espace requis est de 48dp. Il y a de l'espace, donc l'espace et l'enfant 2 sont placés sur la ligne.

Il reste 32dp places dans la file d'attente. L'écart est de 8dp. Enfant 3 : 50dp L'espace requis est de 58dp. L'espace disponible sur la ligne actuelle est insuffisant, donc l'enfant 3 est placé sur une nouvelle ligne.

**Figure 3.** Le troisième élément est placé sur une nouvelle ligne, car il ne tient pas sur la première.

Ajouter des espaces entre les éléments

Ajoutez des espaces entre les lignes et les colonnes à l'aide de rowGap et columnGap. Cela permet d'éviter d'ajouter des modificateurs d'espacement aux enfants.