如何用Flexbox实现带内边距的3×3网格元素跨两列？

你遇到的问题核心其实是盒模型的默认行为在搞鬼——默认情况下，元素的内边距（padding）是会加到flex-basis的尺寸之外的，这就导致你原本算好的flex数值总和（3）被额外的内边距打破，第二行的网格项总宽度超出容器，自然就错位了。

先给你最直接的解决方案：给所有网格项加上box-sizing: border-box;，这样内边距就会被包含在元素的宽度计算里，不会额外占用空间，你的flex数值累加逻辑就能正常生效了。

.grid-item {
  box-sizing: border-box;
  /* 你的其他样式：flex、padding等 */
}

接下来聊聊你的思路：用flex数值控制宽度比例的方案本身是没问题的，尤其是在需要快速实现响应式比例布局时，Flexbox确实比手动定义可变宽度更灵活简便。但要注意几个细节：

• 当使用flex: n时，这个数值其实是flex-grow的比例，而元素的实际宽度会受flex-basis、内边距、边框等因素影响，所以必须配合border-box才能让比例计算准确。
• 如果第二行的布局是“一个占2份，两个各占1份”（总和3），那加上border-box后，内边距就不会干扰这个比例了，所有行的网格项间距也能保持一致。

对比可变宽度的方案：如果用百分比宽度，其实也需要处理盒模型的问题，而且Flexbox能更轻松地处理对齐、换行等细节，所以你的初始选择是合理的，只要补上盒模型的设置就能解决错位问题。

另外，如果你还遇到间距不一致的情况，可以检查一下容器的gap属性（Flexbox也支持gap），用gap来设置网格项之间的间距，比给每个元素加外边距更不容易出现布局bug哦。

内容的提问来源于stack exchange，提问作者Kris Jones