Flexbox布局中右外边距失效 无法将子元素移出父容器

问题根因 #

常规文档流中块级元素的宽度遵循自适应计算规则：父容器可用宽度 = 子元素content宽度 + 左右内边距 + 左右边框 + 左右外边距。你代码中给img设置了width: 100%，已经完全占满了父级.image-parent的778px宽度，此时设置的右外边距会被浏览器自动修正为0以适配宽度规则，自然无法实现向外偏移的效果。

可行解决方案 #

方案1：用transform实现偏移（更推荐，适配编辑器实时调整场景） #

使用transform: translateX()替代外边距做偏移，不会触发布局重排，性能更高，且不受父容器边界限制，正负值可直接控制左右偏移方向：

img {
  width: 100%;
  height: auto;
  /* 负数向左偏移，正数向右偏移，按需调整数值即可 */
  transform: translateX(-100px); 
}

该方案不会改变元素在原有布局流中的占位，不会影响上下其他内容的排版。

方案2：用相对定位实现偏移 #

如果需要保留和原有布局逻辑对齐的实现方式，可以给图片加相对定位，通过left/right属性控制偏移：

/* 父容器确保溢出内容可见 */
.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  overflow: visible;
}

img {
  width: 100%;
  height: auto;
  position: relative;
  /* 负数向左偏移，正数向右偏移 */
  left: -100px;
}

内容的提问来源于stack exchange，提问作者Rohan Keskar18