Flex 布局下子元素宽度为啥不按 flex:1 平分？

极客素平提问于 2026-03-31 10:49:16 阅读 3

移动

我在做一个移动端的底部导航栏，想用 flex 让三个按钮平均占满整行，但实际效果中间那个特别宽，两边被挤小了。明明都写了 flex: 1，是不是哪里写错了？

试过加 width: 0 也没用，而且容器已经设了 display: flex 和 width: 100%，不知道问题出在哪。

.nav {
  display: flex;
  width: 100%;
}
.nav-item {
  flex: 1;
  padding: 12px;
  text-align: center;
}

我来解答赞 4 收藏

反馈

1 条解答

Good“浩然 Lv1

问题出在 padding 上，它会影响 flex 布局的宽度计算。省事的话直接给 .nav-item 加上 box-sizing: border-box 就行了

.nav-item {

  flex: 1;

  padding: 12px;

  text-align: center;

  box-sizing: border-box;

}

2026-03-31 11:00