Flex 项目忽略边距和边框大小

在 Flexbox 中，通过设置 flex: 1 1 33.33% 和 margin: 10px on flex物品，人们可能期望每排三个盒子。然而，使用 flex-wrap:wrap 时，盒子不会缩小到每行三个。

原因在于 box-sizing: border-box 的本质。虽然此属性在宽度和高度计算中包括填充和边框，但不包括边距。边距是单独计算的，默认情况下，Flex 项目具有 flex-shrink: 1，允许它们缩小以适合容器。

要解决此问题，可以通过设置 flex- 来覆盖默认行为Shrink: 0。这可以防止 Flex 项目收缩到边缘。

另一个解决方案是在保持 Flex-Grow: 1 的同时调整 Flex-Basis 值。因为不需要flex-basis 强制换行，由于 flex-grow 消耗可用空间，可以减小该值以容纳边距。例如，通过设置 flex: 1 1 26% 和 margin: 10px，flex 项目现在可以按预期调整。