FlexBox

FlexBox est un conteneur qui dispose les éléments dans une seule direction. Il peut redimensionner, encapsuler, aligner et répartir l'espace entre les éléments pour remplir de manière optimale l'espace disponible. Il s'agit d'une mise en page utile pour les éléments de différentes tailles et pour le redimensionnement des éléments lorsque l'espace disponible change.

Avec FlexBox, vous pouvez :

• contrôler la façon dont les éléments s'agrandissent et se réduisent pour remplir l'espace disponible ;
• encapsuler les éléments sur de nouvelles lignes ou colonnes lorsqu'il n'y a pas assez d'espace pour eux ;
• répartir l'espace supplémentaire entre les éléments à l'aide de préréglages pratiques.

Quand utiliser FlexBox

FlexBox est généralement utilisé pour afficher un petit nombre d'éléments dans une mise en page globale de l'écran. Pour une mise en page globale de l'écran, Grid est généralement un meilleur choix. FlexBox ne prend pas en charge le chargement différé des éléments. Pour afficher un grand nombre d'éléments, utilisez des listes et des grilles différées. Si vous devez encapsuler des éléments, utilisez FlexBox au lieu de FlowRow et FlowColumn.

Terminologie et concepts

FlexBox dispose ses éléments dans des lignes horizontales ou verticales. Cette direction de ces lignes établit l'axe principal. L'axe transversal est à 90 degrés de l'axe principal. La longueur de FlexBox le long de l'axe principal est appelée taille principale. La longueur correspondante de l'axe transversal est appelée taille transversale. Ces tailles et ces axes constituent la base du comportement de FlexBox.

Appliquer des propriétés

Vous pouvez appliquer des propriétés FlexBox de deux manières :

• Au conteneur FlexBox à l'aide de FlexBox(config)
• À un élément à l'intérieur de FlexBox à l'aide de Modifier.flex

Propriétés du conteneur (config)

Propriétés de l'élément (Modifier.flex)

direction : direction de la mise en page de l'élément wrap : indique s'il faut encapsuler les éléments si la taille principale est insuffisante justifyContent : indique comment répartir les éléments le long de l'axe principal alignItems : indique comment aligner les éléments le long de l'axe transversal alignContent : indique comment répartir l'espace supplémentaire à partir de la taille transversale lorsqu'il y a plusieurs lignes rowGap / columnGap : ajoute de l'espace entre les éléments et les lignes Pour en savoir plus sur ces propriétés, consultez Définir le comportement du conteneur.

basis : taille de l'élément avant la répartition de tout espace supplémentaire à partir de la taille principale grow : part de l'espace supplémentaire à partir de la taille principale que cet élément doit recevoir shrink : part du déficit d'espace à partir de la taille principale que cet élément doit recevoir alignSelf : indique comment répartir l'espace supplémentaire à partir de la taille transversale sur cet élément, remplace alignItems order : contrôle l'ordre de la mise en page Pour en savoir plus sur ces propriétés, consultez Définir le comportement de l'élément.

Comprendre l'algorithme de mise en page FlexBox

L'une des fonctionnalités les plus puissantes de FlexBox est sa capacité à redimensionner ses enfants pour s'adapter au mieux à l'espace disponible. Comprendre comment FlexBox procède peut vous aider à définir les propriétés FlexBox pour optimiser votre interface utilisateur pour toutes les tailles possibles.

L'algorithme de mise en page de FlexBox fonctionne comme suit :

1. Calculer la taille de base de l'enfant : utilisez la valeur basis de l'enfant pour calculer sa taille initiale le long de l'axe principal avant la répartition de tout espace supplémentaire.

2. Trier les enfants : triez les enfants par leurs valeurs order, le cas échéant.

3. Créer des lignes : pour chaque enfant, vérifiez si sa taille initiale plus gap s'adaptera à l'espace restant sur la ligne actuelle. Si c'est le cas, placez cet enfant dans la ligne. Sinon, placez-le sur une nouvelle ligne si l'encapsulation est activée, ou placez l'élément dans la ligne actuelle où il débordera (il sera partiellement masqué par le bord du conteneur).

4. Aligner ou redimensionner les éléments dans l'axe principal : pour chaque ligne, répartissez l'espace supplémentaire sur ou entre les éléments en les redimensionnant ou en les alignant.

5. Aligner ou redimensionner les éléments dans l'axe transversal : pour chaque ligne, répartissez l'espace supplémentaire sur ou entre les éléments et les lignes en les étirant ou en les alignant.

Maintenant que vous connaissez les concepts FlexBox, consultez Premiers pas pour créer un FlexBox de base.