Flex Box右侧留白问题：无法使Flex盒子占满页面100%宽度

嘿，我碰到过好多次这种flex容器右侧留白的情况，大概率是浏览器默认样式或者布局细节没处理到位，咱们一步步来解决：

• 先干掉浏览器默认的body边距：绝大多数浏览器会给body元素默认加上8px左右的margin，这会直接导致你的flex容器即使设了width:100%，也会被挤得缩进去，右侧自然就留白了。给body加个重置样式就行：

body {
  margin: 0;
  padding: 0;
}

• 给flex容器加上box-sizing: border-box：这个属性超级关键！它能让元素的padding、border都包含在你设置的宽度里，不会额外撑开容器导致宽度溢出或者留白。同时确保容器本身的宽度设置正确，比如：

.your-flex-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

• 检查父元素的布局：如果你的flex容器嵌套在其他元素里，别忘了给父元素也设置width:100%; margin:0; padding:0;，不然父元素本身的边距也会限制容器的宽度。

别用calc(100% + Xpx)这种硬凑数值的方法，这种方式完全不适应不同屏幕尺寸，小屏幕肯定会出现截断的问题，咱们用上面这些自适应的方法就能从根源解决问题啦。

备注：内容来源于stack exchange，提问作者Brad