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 de retour à la ligne, 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 la direction dans laquelle les éléments sont disposés. Il accepte les valeurs suivantes :

• Row (par défaut) : définit l'axe principal comme horizontal. Dans les paramètres régionaux de gauche à droite, l'ordre sera de gauche à droite, et inversement pour les paramètres régionaux de droite à gauche.
• RowReverse : inverse la direction de Row.
• Column : définit l'axe principal comme vertical, de haut en bas.
• ColumnReverse : inverse la direction 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 montre 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 illustrent 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 (le retour à la ligne est activé). Les images suivantes illustrent le comportement lorsque la direction est Row :

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Encapsuler les éléments

Le retour à la ligne 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 de retour à la ligne à l'aide de wrap.

Valeur FlexWrap	Exemple utilisant la direction Row
NoWrap (par défaut) : empêche le retour à la ligne 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 écart), une nouvelle ligne est créée dans la direction 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 la direction opposée à 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 de wrapping FlexBox. Le conteneur FlexBox a une taille principale de 100dp, avec wrap défini sur FlexWrap.Wrap et un espacement de 8dp. Il contient trois éléments avec basis 20dp, 40dp et 50dp, respectivement.

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

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

Il y a 32dp place disponible dans la file d'attente. L'écart est de 8dp. L'enfant 3 est 50dp. L'espace requis est de 58dp. Comme il n'y a pas assez d'espace sur la ligne actuelle, 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 permet d'é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.