Éléments flexibles sans tenir compte des marges et du dimensionnement de la bordure-box

Dans flexbox, en définissant flex : 1 1 33,33 % et marge : 10 px sur flex articles, on pourrait s’attendre à trois cases par rangée. Cependant, avec flex-wrap: wrap, les boîtes ne rétrécissent pas pour en contenir trois par ligne.

La raison réside dans la nature du dimensionnement de la boîte : border-box. Bien que cette propriété inclue le remplissage et les bordures dans les calculs de largeur et de hauteur, elle exclut les marges. Les marges sont calculées séparément et, par défaut, les éléments flexibles ont flex-shrink: 1, ce qui leur permet de se rétrécir afin de s'adapter au conteneur.

Pour résoudre ce problème, vous pouvez remplacer le comportement par défaut en définissant flex- rétrécir : 0. Cela empêche les éléments flexibles de se réduire dans les marges.

Une autre solution consiste à ajuster la valeur de flex-basis tout en conservant flex-grow : 1. Puisqu'il y a n'est pas nécessaire que flex-basis impose un wrapper en raison de la consommation d'espace libre par flex-grow, on peut réduire la valeur pour s'adapter aux marges. En définissant flex: 1 1 26% et margin: 10px, par exemple, les éléments flex s'ajustent désormais comme prévu.