La propriété CSS flex-wrap: balance, disponible depuis Chrome 150, permet d’éviter l’effet d’"orphelin" où un seul élément s’enroule seul sur une nouvelle ligne dans un conteneur flex avec flex-wrap: wrap. Elle redistribue automatiquement les éléments pour un rendu plus équilibré, contrairement à la méthode classique qui peut nécessiter des media queries fragiles.

L’article illustre ce problème avec un exemple concret où des liens de navigation s’enroulent de manière déséquilibrée, puis montre comment flex-wrap: balance résout ce cas. Il aborde aussi un exemple réel sur Buffer.com, où des icônes sociales s’espacent de façon inesthétique en cas de redimensionnement, et propose deux solutions alternatives (container queries et max-width avec clamp) pour les navigateurs ne supportant pas encore cette propriété.

Enfin, l’auteur souligne que flex-wrap: balance simplifie la gestion des layouts flexbox responsives, réduisant le besoin de recourir à des astuces complexes, tout en restant limité à Chrome pour l’instant.