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 l'orientation de la mise en page, le comportement d'encapsulation, l'alignement et les espaces entre les éléments.

Orientation de la mise en page

La fonction direction définit l'axe principal, qui détermine l'orientation des éléments. Elle accepte les valeurs suivantes :

• Row (par défaut) : définit l'axe principal comme 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 l'orientation de Row.
• Column : définit l'axe principal comme vertical, de haut en bas.
• ColumnReverse : inverse l'orientation de Column.

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

Les sections suivantes décrivent comment aligner les é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 illustre le comportement lorsque l'orientation 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 alignSelf modificateur.

Les images suivantes illustrent le comportement lorsque l'orientation 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 existe plusieurs lignes (l'encapsulation est activée). Les images suivantes illustrent le comportement lorsque l'orientation est Row :

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Encapsuler les éléments

L'encapsulation 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'encapsulation à l'aide de wrap.

Valeur FlexWrap	Exemple d'utilisation de l'orientation Row
NoWrap (par défaut) : empêche l'encapsulation des éléments. 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 espace), une nouvelle ligne est créée dans le sens de l'axe transversal. Par exemple, si l'orientation 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 l'orientation 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.

L'espace disponible sur la ligne est de 100dp. L'enfant 1 mesure 20dp. Il y a de l'espace, donc l'enfant 1 est placé sur la ligne.

L'espace disponible sur la ligne est de 80dp. L'espace est de 8dp. L'enfant 2 mesure 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.

L'espace disponible sur la ligne est de 32dp. L'espace est de 8dp. L'enfant 3 mesure 50dp. L'espace requis est de 58dp. Il n'y a pas assez d'espace sur la ligne actuelle, donc l'enfant 3 est placé sur une nouvelle ligne.

Ajouter des espaces entre les éléments

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

rowGap ajoute un espace vertical entre les éléments et les lignes.	columnGap ajoute un espace horizontal entre les éléments et les lignes.	gap est une fonction pratique qui ajoute à la fois columnGap et rowGap.