为什么Flex容器里的元素在移动端显示时会超出屏幕宽度？

UP主～诺曦提问于 2026-02-15 09:35:31 阅读 48

移动

我用Flex布局做移动端导航栏，设置了容器display: flex，里面三个等宽按钮。但在手机真机测试时，第三个按钮总是溢出屏幕边缘，左右两边留白也不一致。试过加flex-wrap: wrap和设置容器width: 100%都不管用，这是为什么？


.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.nav button {
  flex: 1;
  padding: 12px;
  min-width: 100px;
}

手机调试发现每个按钮实际宽度比计算值大，比如设计稿每个按钮应该80px，但实际测量显示有120px。明明设置了min-width和flex，为什么会这样？

布局方案

我来解答赞 3 收藏

反馈

1 条解答

轩辕秀花 Lv1

问题出在 min-width 和 padding 上，这两个属性会让按钮的实际宽度超出你预期的等分宽度。省事的话，把 min-width 去掉，然后给 .nav 加个 box-sizing: border-box，顺便确认下 html 和 body 的宽度是不是 100%。

代码调整如下：

.nav {

  display: flex;

  justify-content: space-between;

  width: 100%;

  box-sizing: border-box;

}

.nav button {

  flex: 1;

  padding: 12px;

}

如果还不行，检查一下是否有默认样式或者外边距影响，加个全局样式重置更省心：

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

2026-02-15 10:04