FlexBox

Remarque : FlexBox est actuellement une API expérimentale et est susceptible d'être modifiée à l'avenir. Signalez tout problème dans l'outil de suivi des problèmes.

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 redimensionner les é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
• Envelopper les éléments sur de nouvelles lignes ou colonnes lorsqu'il n'y a pas assez d'espace
• 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, il est généralement préférable d'utiliser Grid. FlexBox n'est pas compatible avec le chargement différé des éléments. Pour afficher un grand nombre d'éléments, utilisez des listes et des grilles "lazy". Si vous devez encapsuler des éléments, utilisez FlexBox au lieu de FlowRow et FlowColumn.

Terminologie et concepts

Important : FlexBox est fortement influencé par la spécification de mise en page CSS Flexible Box et présente des concepts, une terminologie et un comportement presque identiques. Si vous connaissez display: flex, vous constaterez que les propriétés et le comportement de FlexBox sont presque identiques.

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

Figure 1. Axes et tailles lorsque la direction FlexBox est Row.

Figure 2. Axes et tailles lorsque la direction FlexBox est Column.

Appliquer des propriétés

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

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

Propriétés du conteneur (config)

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

direction : orientation 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 : comment distribuer les éléments le long de l'axe principal alignItems : comment aligner des éléments le long de l'axe transversal alignContent : comment répartir l'espace supplémentaire 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 distribution de tout espace supplémentaire à partir de la taille principale grow : part de l'espace supplémentaire que cet élément doit recevoir à partir de la taille principale shrink : part du déficit d'espace par rapport à la taille principale que cet élément doit recevoir alignSelf : indique comment répartir l'espace supplémentaire de la taille transversale sur cet élément, remplace alignItems. order : contrôle l'ordre de mise en page Pour en savoir plus sur ces propriétés, consultez Définir le comportement des éléments.

Comprendre l'algorithme de mise en page FlexBox

L'une des caractéristiques les plus intéressantes de FlexBox est sa capacité à redimensionner ses enfants pour qu'ils s'adaptent au mieux à l'espace disponible. Comprendre comment FlexBox procède peut vous aider à définir les propriétés FlexBox pour optimiser votre UI 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 distribution de tout espace supplémentaire.

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

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

4. Aligner ou redimensionner des éléments sur 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 sur l'axe transversal : pour chaque ligne, répartissez l'espace supplémentaire 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.