Problèmes après l'ajout de bordures aux éléments enfants CSS3 flex

Question

Une fois l'élément parent défini sur flex, l'élément enfant {flex:0 0 33.3333%} peut être divisé en trois parties égales dans la même ligne. Cependant, si une bordure est ajoutée à l'élément enfant, seules 2 peuvent être disposées dedans. la même ligne. Flex se dilate et se contracte de manière élastique, et la largeur de la bordure n'est pas calculée.

滿天的星座 · Answer

Ajoutez

à l'élément

child

box-sizing: border-box;

Le package n'inclut pas le remplissage et les bordures, qui sont deux modèles de boîte, contrôlés par le dimensionnement de la boîte
Référence : https://developer.mozilla.org...

phpcn_u1582 · Answer

Tant que vous définissez flex-wrap: wrap; pour flex, il ne s'étirera pas et il s'enroulera lorsqu'il dépassera la limite. flex-wrap: wrap;，它就不是伸缩了，超出了就会换行。

解决方法如一楼所示，当然你也可以使用calc函数将flex的值减去border的值(flex:0 0 calc(33.333% - 2px)),或者使用outline: 1px solid red;，outline是不会将宽度计算进去的，你的这段代码可以不用flex: 0 0 33.333%这样写，直接写width:33.33%或者flex:33.33%

La solution est affichée au premier étage. Bien sûr, vous pouvez également utiliser la fonction calc pour soustraire la valeur de bordure de la valeur flex (flex:0 0 calc(33.333% - 2px)), ou utilisez outline: 1px solid red;, outline ne calculera pas la largeur. Vous n'avez pas besoin d'écrire ce code comme flex: 0 0 33.333%, écrivez simplement <. code>width directement :33.33% ou flex:33.33%. 🎜