Pourquoi les éléments flexibles ne sont-ils pas réduits pour s'adapter à trois par ligne avec des marges et un dimensionnement de type « border-box » ?

Éléments flexibles sans tenir compte des marges et du dimensionnement des bordures

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 rangée.

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étrécir dans les marges.

Une autre solution consiste à ajuster la valeur de flex-basis tout en conservant flex-grow : 1. Puisqu'il n'est pas nécessaire que flex-basis applique un emballage en raison de la consommation d'espace libre par croissance flexible, 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!