On a tous connu ce moment où un élément flex refuse de prendre la largeur restante dans un conteneur, ou au contraire s’étale sans raison apparente. Le problème vient rarement de display: flex lui-même, mais de la façon dont on gère flex-grow, flex-shrink et flex-basis – le trio qui contrôle réellement l’extension des éléments. Comprendre leur interaction change la manière de construire des mises en page adaptatives.
Quand flex-basis entre en conflit avec width
Situation classique : on pose width: 200px sur un élément flex, puis on s’étonne que la largeur réelle ne corresponde pas. En contexte flexbox, flex-basis prend le dessus sur width quand les deux sont définis.
A lire en complément : L'essor de l'intelligence participative : étude d'une encyclopédie collaborative en ligne
Par défaut, flex-basis vaut auto, ce qui signifie que le navigateur regarde d’abord la propriété width (ou height si l’axe principal est vertical). Dès qu’on fixe explicitement un flex-basis à une valeur en pixels ou en pourcentage, width est ignoré pour le calcul de distribution d’espace.
Concrètement, si on veut qu’un élément parte d’une taille précise avant que la distribution de l’espace disponible ne s’applique, on utilise flex-basis et on oublie width. Mélanger les deux crée des résultats imprévisibles, surtout quand flex-shrink entre en jeu et réduit les éléments pour éviter le débordement du conteneur.
Lire également : Nouvel arrivant dans l'académie : comment activer son webmail Nancy Metz ?
Flex-grow et flex-shrink : le mécanisme de distribution réelle
La plupart des guides expliquent flex-grow comme un ratio de partage. C’est vrai, mais incomplet. Le navigateur ne répartit pas la largeur totale du conteneur : il distribue uniquement l’espace restant après calcul des flex-basis.
Calcul concret de flex-grow
Prenons un conteneur de 900 pixels avec trois éléments ayant chacun un flex-basis de 200 pixels. L’espace restant est de 300 pixels. Si le premier élément a flex-grow: 2 et les deux autres flex-grow: 1, la somme des ratios est 4. Le premier récupère 150 pixels supplémentaires, les deux autres 75 chacun.
Ce calcul en deux étapes (base fixe + distribution du surplus) explique pourquoi des éléments avec le même flex-grow n’ont pas forcément la même taille finale : leurs flex-basis diffèrent.
Le piège de flex-shrink avec des contenus longs
Quand le contenu total dépasse la largeur du conteneur, flex-shrink réduit les éléments. Mais la réduction n’est pas proportionnelle au ratio seul : elle dépend du produit flex-shrink × flex-basis. Un élément avec un grand flex-basis et un flex-shrink: 1 rétrécira davantage qu’un petit élément avec le même ratio.
En pratique, on rencontre ce cas avec des colonnes de texte long à côté d’une sidebar étroite. La colonne principale absorbe presque toute la réduction, ce qui peut écraser le contenu. Poser min-width: 0 sur les éléments flex permet au texte de passer à la ligne au lieu de forcer un débordement horizontal.
Raccourci flex et valeurs par défaut qui piègent
La propriété raccourcie flex accepte jusqu’à trois valeurs : grow, shrink, basis. Le problème, c’est que flex: 1 ne signifie pas simplement flex-grow: 1. La spécification résout flex: 1 en flex: 1 1 0%, ce qui fixe le flex-basis à zéro.
Conséquence directe : avec flex: 1, la taille de base de l’élément est nulle et toute la largeur du conteneur devient de l’espace à distribuer. C’est souvent le comportement voulu pour des colonnes égales, mais ça surprend quand on s’attend à ce que le contenu intrinsèque serve de point de départ.
flex: autose résout enflex: 1 1 auto– l’élément grandit et rétrécit à partir de sa taille de contenu, ce qui convient aux layouts où chaque bloc a un contenu de longueur variable.flex: nonese résout enflex: 0 0 auto– l’élément garde sa taille intrinsèque, ni croissance ni réduction. Utile pour un bouton ou une icône qui ne doit jamais changer de dimension.flex: 1se résout enflex: 1 1 0%– toutes les colonnes partent de zéro et se partagent l’espace à parts égales, quel que soit leur contenu.
On tombe régulièrement sur des layouts cassés parce qu’un développeur a utilisé flex: 1 en pensant obtenir le comportement de flex: auto. La différence tient au flex-basis : 0% contre auto.
Alignement sur l’axe transversal et extension en hauteur
L’extension d’un élément flex ne se limite pas à l’axe principal. Par défaut, align-items vaut stretch, ce qui signifie que chaque élément s’étire sur toute la hauteur (ou largeur, en colonne) du conteneur. C’est ce qui donne des colonnes de même hauteur sans effort.
Mais dès qu’on pose une hauteur fixe sur un élément ou qu’on change align-items à flex-start, l’extension verticale disparaît. On perd alors l’alignement visuel entre colonnes, ce qui oblige à repenser la structure.
align-self pour cibler un seul élément
Quand un seul élément doit se comporter différemment (un footer collé en bas d’une carte, par exemple), align-self permet de surcharger la valeur du conteneur sans affecter les voisins. On utilise align-self: flex-end sur cet élément, combiné à margin-top: auto pour pousser l’élément vers le bas de son conteneur.
Ce pattern est plus fiable que de jouer avec des hauteurs fixes ou du positionnement absolu à l’intérieur d’un flex item.
Déboguer l’extension flex avec les DevTools Chrome
Les outils de développement de Chrome affichent désormais une superposition visuelle pour les conteneurs flex. En inspectant un élément, un badge « flex » apparaît dans le DOM. Un clic dessus active une superposition colorée qui montre les dimensions réelles de chaque élément, l’espace distribué et les zones de gap.
- L’éditeur Flexbox dans le panneau Styles permet de modifier
justify-content,align-itemsetflex-directionen cliquant sur des icônes, sans taper de code. - Le survol de chaque élément flex affiche sa taille de base, la croissance appliquée et la réduction éventuelle.
- On peut ajuster la couleur de la superposition pour distinguer plusieurs conteneurs flex imbriqués sur la même page.
L’inspection visuelle remplace avantageusement l’essai-erreur pour comprendre pourquoi un élément ne s’étend pas comme prévu. Les retours varient sur ce point, mais dans la plupart des cas, quelques secondes dans les DevTools permettent d’identifier un flex-basis inattendu ou un min-width implicite qui bloque la réduction.
Maîtriser l’extension des éléments flex revient à contrôler trois variables (grow, shrink, basis) et à comprendre sur quel axe elles agissent. Le raccourci flex cache des valeurs par défaut qui changent radicalement le comportement. Poser un flex-basis explicite et vérifier le résultat dans les DevTools reste la méthode la plus directe pour obtenir le layout attendu sans surprises.
