Flex Extend : les erreurs fréquentes qui cassent vos mises en page

La propriété CSS flex regroupe trois raccourcis (flex-grow, flex-shrink, flex-basis) dont l’interaction provoque la plupart des mises en page cassées. Comprendre chaque composant isolément ne suffit pas : c’est leur combinaison avec des valeurs par défaut souvent ignorées qui génère des débordements, des colonnes écrasées ou des éléments qui refusent de rétrécir.

Le minimum automatique : la première cause de débordement en Flexbox

Avant de toucher à flex-grow ou flex-shrink, il faut régler un comportement que la plupart des tutoriels n’abordent pas en priorité. Les navigateurs modernes appliquent un minimum basé sur le contenu à chaque flex item via la valeur par défaut min-width: auto.

Concrètement, un élément flex refuse de devenir plus petit que la largeur intrinsèque de son contenu. Une URL longue, un mot sans césure ou une image non contrainte suffisent à faire déborder le conteneur, même si flex-shrink est à 1.

Ce comportement est la cause la plus fréquente des mises en page flex qui débordent sur mobile. La correction tient en une ligne :

• min-width: 0 sur les flex items en direction row (la direction par défaut) pour autoriser le rétrécissement en dessous de la largeur du contenu
• min-height: 0 sur les flex items en direction column, selon la même logique appliquée à l’axe vertical
• overflow: hidden (ou overflow: auto) sur l’item comme alternative, quand le contenu doit être tronqué plutôt que compressé

Ajouter min-width: 0 de façon systématique sur les enfants flex est une bonne pratique défensive. Sans cette déclaration, flex-shrink n’a aucun effet réel sur un contenu plus large que le conteneur.

Erreurs sur flex-basis et la confusion avec width

flex-basis définit la taille initiale d’un élément flex avant que l’espace restant ne soit distribué par flex-grow et flex-shrink. Sa valeur par défaut est auto, ce qui signifie que le navigateur se rabat sur la propriété width (ou height en colonne) si elle existe.

L’erreur fréquente consiste à déclarer à la fois width et flex-basis sur le même élément. Dans ce cas, flex-basis prend toujours le dessus sur width en contexte flex. La déclaration width est alors ignorée, ce qui produit un résultat inattendu quand les deux valeurs diffèrent.

Le piège de flex-basis: 0 versus flex-basis: auto

Écrire flex: 1 est un raccourci pour flex: 1 1 0. Le flex-basis passe à 0, ce qui signifie que l’espace total du conteneur est distribué proportionnellement entre les items, sans tenir compte de leur contenu.

Écrire flex: auto équivaut à flex: 1 1 auto. Le flex-basis reste auto, donc la taille du contenu sert de point de départ avant distribution. Deux items avec flex: 1 auront la même largeur. Deux items avec flex: auto n’auront la même largeur que si leur contenu est identique.

Confondre ces deux raccourcis produit des colonnes de largeurs inégales alors qu’on attendait une répartition uniforme, ou l’inverse.

Flex-wrap et align-content : le duo mal compris

Activer flex-wrap: wrap permet aux éléments de passer à la ligne quand le conteneur manque de place. Le problème survient quand les développeurs oublient que align-content entre en jeu dès qu’il y a plusieurs lignes.

Par défaut, align-content vaut stretch : chaque ligne s’étire pour occuper sa part de l’axe transversal. Sur un conteneur dont la hauteur est fixe ou contrainte, cela crée des espaces verticaux entre les lignes qui semblent inexplicables.

L’espace fantôme entre les lignes flex

Cet espace n’est pas une marge ni un padding. C’est align-content: stretch qui distribue la hauteur restante entre les lignes. Pour le supprimer, il suffit de passer à align-content: flex-start (ou start).

La confusion vient du fait que align-items et align-content agissent sur le même axe mais à des niveaux différents. align-items aligne les éléments à l’intérieur de chaque ligne, tandis que align-content distribue les lignes elles-mêmes dans le conteneur. Modifier l’un sans vérifier l’autre est une source d’erreur récurrente.

Flex extend dans les cas limites : gap, margin auto et ordre visuel

Les erreurs les plus subtiles apparaissent quand des propriétés externes interagissent avec le modèle flex.

• gap en contexte flex est désormais supporté par tous les navigateurs majeurs, mais sa valeur n’est pas prise en compte dans le calcul de flex-basis. Un conteneur avec gap: 20px et trois enfants à flex-basis: 33.33% débordera, parce que la somme des bases plus les espaces dépasse le conteneur
• margin: auto sur un flex item absorbe tout l’espace libre disponible sur l’axe concerné. Un margin-left: auto pousse l’élément à droite, ce qui est utile pour créer des barres de navigation. L’erreur est de combiner justify-content avec des marges auto : les marges auto annulent complètement l’effet de justify-content
• La propriété order modifie l’ordre visuel sans toucher au DOM. Cela casse la navigation au clavier et la lecture par les technologies d’assistance si l’ordre logique du HTML ne correspond plus à l’ordre affiché

Le raccourci flex combiné à gap demande un ajustement de flex-basis via calc() pour compenser les espaces. Par exemple, pour trois colonnes avec un gap de 20px : flex: 1 1 calc(33.33% - 14px) (chaque item supporte deux tiers du gap total).

Déboguer une mise en page flex cassée : méthode directe

Les outils de développement de Chrome et Firefox intègrent un inspecteur Flexbox dédié. Dans Chrome, un badge « flex » apparaît sur chaque conteneur flex dans le panneau Éléments. Cliquer dessus active une superposition colorée qui montre la direction des axes, la taille de chaque item et l’espace libre restant.

Vérifications dans l’ordre

Quand une mise en page flex ne se comporte pas comme prévu, vérifier d’abord si min-width: auto provoque un débordement. Ajouter temporairement min-width: 0 sur les enfants suffit à confirmer ou éliminer cette hypothèse. Vérifier ensuite la valeur réelle de flex-basis dans l’onglet Computed du navigateur, puis contrôler si align-content crée un espacement vertical non désiré.

La majorité des bugs flex se résolvent en corrigeant l’une de ces trois propriétés. Garder min-width: 0 comme valeur par défaut sur les flex items, distinguer flex: 1 de flex: auto, et ne jamais oublier align-content dès que flex-wrap est actif : ces trois réflexes éliminent l’essentiel des erreurs de mise en page liées à Flexbox.