设置flex:1和flex-basis:0后Flexbox子元素尺寸仍不相等的问题

这问题我之前做响应式布局时也踩过坑！不用width:50%这种硬编码的方式，Flexbox本身就有完美的方向无关、可扩展的解决方案，核心就是两个属性的配合：

关键方案：flex: 1 + box-sizing: border-box #

默认情况下，CSS的box-sizing是content-box，这意味着元素的padding会额外增加它的总尺寸——这就是为什么带padding的蓝色盒子会比绿色盒子宽的原因。加上flex:1让子元素平分父容器空间，就能彻底解决问题：

完整代码示例 #

<div class="flex-container">
  <div class="box blue">带padding的盒子</div>
  <div class="box green">不带padding的盒子</div>
</div>

.flex-container {
  display: flex;
  /* 这里可以切换成flex-direction: column，依然能保持尺寸相等 */
  /* flex-direction: column; */
  gap: 10px; /* 可选，增加子元素间距 */
}

.box {
  flex: 1; /* 核心：让子元素平分可用空间，适配任意数量的子元素 */
  box-sizing: border-box; /* 让padding包含在元素尺寸内，不额外撑开 */
  border: 1px solid #000;
}

.blue {
  padding: 20px;
  background-color: #42a5f5;
}

.green {
  background-color: #66bb6a;
}

原理说明 #

• flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写：
  • flex-grow:1：每个子元素会按比例分配父容器的剩余空间
  • flex-basis:0%：让所有子元素的基准尺寸从0开始计算，避免内容影响平分比例
• box-sizing:border-box：把元素的padding、border都包含在设定的尺寸内，确保带padding的元素不会额外变大

这种方案完全支持方向切换（不管是横向row还是纵向column），就算你后来要加3个、4个子元素，只要给每个都加上flex:1，它们都会自动平分父容器空间，不用修改任何百分比数值。

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