为什么 Flex 项目不通过边距和“边框”大小缩小以适应每行三个？

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

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

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

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

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

以上是为什么 Flex 项目不通过边距和“边框”大小缩小以适应每行三个？的详细内容。更多信息请关注PHP中文网其他相关文章！